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

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 (253) hide show
  1. package/CHANGELOG.beta.md +76 -1
  2. package/CHANGELOG.json +621 -0
  3. package/dist/communication-react.d.ts +217 -7
  4. package/dist/dist-cjs/communication-react/index.js +2207 -1184
  5. package/dist/dist-cjs/communication-react/index.js.map +1 -1
  6. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
  7. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
  8. package/dist/dist-esm/calling-component-bindings/src/errorBarSelector.js +1 -1
  9. package/dist/dist-esm/calling-component-bindings/src/errorBarSelector.js.map +1 -1
  10. package/dist/dist-esm/calling-component-bindings/src/handlers/createCommonHandlers.d.ts +4 -0
  11. package/dist/dist-esm/calling-component-bindings/src/handlers/createCommonHandlers.js +37 -1
  12. package/dist/dist-esm/calling-component-bindings/src/handlers/createCommonHandlers.js.map +1 -1
  13. package/dist/dist-esm/calling-stateful-client/src/CallClientState.d.ts +22 -1
  14. package/dist/dist-esm/calling-stateful-client/src/CallClientState.js.map +1 -1
  15. package/dist/dist-esm/calling-stateful-client/src/CallContext.d.ts +14 -0
  16. package/dist/dist-esm/calling-stateful-client/src/CallContext.js +44 -0
  17. package/dist/dist-esm/calling-stateful-client/src/CallContext.js.map +1 -1
  18. package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.d.ts +1 -0
  19. package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.js +21 -0
  20. package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.js.map +1 -1
  21. package/dist/dist-esm/calling-stateful-client/src/Converter.js +1 -0
  22. package/dist/dist-esm/calling-stateful-client/src/Converter.js.map +1 -1
  23. package/dist/dist-esm/calling-stateful-client/src/DeviceManagerDeclarative.d.ts +13 -1
  24. package/dist/dist-esm/calling-stateful-client/src/DeviceManagerDeclarative.js +8 -1
  25. package/dist/dist-esm/calling-stateful-client/src/DeviceManagerDeclarative.js.map +1 -1
  26. package/dist/dist-esm/calling-stateful-client/src/InternalCallContext.d.ts +4 -0
  27. package/dist/dist-esm/calling-stateful-client/src/InternalCallContext.js +28 -0
  28. package/dist/dist-esm/calling-stateful-client/src/InternalCallContext.js.map +1 -1
  29. package/dist/dist-esm/calling-stateful-client/src/LocalVideoStreamVideoEffectsSubscriber.d.ts +29 -0
  30. package/dist/dist-esm/calling-stateful-client/src/LocalVideoStreamVideoEffectsSubscriber.js +54 -0
  31. package/dist/dist-esm/calling-stateful-client/src/LocalVideoStreamVideoEffectsSubscriber.js.map +1 -0
  32. package/dist/dist-esm/calling-stateful-client/src/Logger.d.ts +16 -29
  33. package/dist/dist-esm/calling-stateful-client/src/Logger.js +16 -29
  34. package/dist/dist-esm/calling-stateful-client/src/Logger.js.map +1 -1
  35. package/dist/dist-esm/calling-stateful-client/src/StatefulCallClient.js +1 -1
  36. package/dist/dist-esm/calling-stateful-client/src/StatefulCallClient.js.map +1 -1
  37. package/dist/dist-esm/calling-stateful-client/src/StreamUtils.js +137 -370
  38. package/dist/dist-esm/calling-stateful-client/src/StreamUtils.js.map +1 -1
  39. package/dist/dist-esm/calling-stateful-client/src/StreamUtilsLogging.d.ts +17 -0
  40. package/dist/dist-esm/calling-stateful-client/src/StreamUtilsLogging.js +198 -0
  41. package/dist/dist-esm/calling-stateful-client/src/StreamUtilsLogging.js.map +1 -0
  42. package/dist/dist-esm/calling-stateful-client/src/index-public.d.ts +1 -0
  43. package/dist/dist-esm/calling-stateful-client/src/index-public.js.map +1 -1
  44. package/dist/dist-esm/chat-component-bindings/src/messageThreadSelector.js +1 -1
  45. package/dist/dist-esm/chat-component-bindings/src/messageThreadSelector.js.map +1 -1
  46. package/dist/dist-esm/chat-stateful-client/src/EventSubscriber.js +10 -2
  47. package/dist/dist-esm/chat-stateful-client/src/EventSubscriber.js.map +1 -1
  48. package/dist/dist-esm/communication-react/src/index.d.ts +2 -0
  49. package/dist/dist-esm/communication-react/src/index.js.map +1 -1
  50. package/dist/dist-esm/react-components/src/components/CameraButton.d.ts +16 -0
  51. package/dist/dist-esm/react-components/src/components/CameraButton.js +38 -1
  52. package/dist/dist-esm/react-components/src/components/CameraButton.js.map +1 -1
  53. package/dist/dist-esm/react-components/src/components/CaptionsBanner.d.ts +30 -0
  54. package/dist/dist-esm/react-components/src/components/CaptionsBanner.js +47 -0
  55. package/dist/dist-esm/react-components/src/components/CaptionsBanner.js.map +1 -0
  56. package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.d.ts +6 -1
  57. package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.js.map +1 -1
  58. package/dist/dist-esm/react-components/src/components/ControlBarButton.js +1 -1
  59. package/dist/dist-esm/react-components/src/components/ControlBarButton.js.map +1 -1
  60. package/dist/dist-esm/react-components/src/components/DevicesButton.d.ts +1 -1
  61. package/dist/dist-esm/react-components/src/components/DevicesButton.js +79 -55
  62. package/dist/dist-esm/react-components/src/components/DevicesButton.js.map +1 -1
  63. package/dist/dist-esm/react-components/src/components/ErrorBar.d.ts +4 -0
  64. package/dist/dist-esm/react-components/src/components/ErrorBar.js.map +1 -1
  65. package/dist/dist-esm/react-components/src/components/HorizontalGallery.d.ts +4 -0
  66. package/dist/dist-esm/react-components/src/components/HorizontalGallery.js +29 -24
  67. package/dist/dist-esm/react-components/src/components/HorizontalGallery.js.map +1 -1
  68. package/dist/dist-esm/react-components/src/components/MessageThread.d.ts +2 -2
  69. package/dist/dist-esm/react-components/src/components/MessageThread.js +24 -11
  70. package/dist/dist-esm/react-components/src/components/MessageThread.js.map +1 -1
  71. package/dist/dist-esm/react-components/src/components/MicrophoneButton.d.ts +12 -0
  72. package/dist/dist-esm/react-components/src/components/MicrophoneButton.js +29 -1
  73. package/dist/dist-esm/react-components/src/components/MicrophoneButton.js.map +1 -1
  74. package/dist/dist-esm/react-components/src/components/ParticipantItem.js +1 -1
  75. package/dist/dist-esm/react-components/src/components/ParticipantItem.js.map +1 -1
  76. package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js +1 -1
  77. package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js.map +1 -1
  78. package/dist/dist-esm/react-components/src/components/ResponsiveHorizontalGallery.d.ts +4 -2
  79. package/dist/dist-esm/react-components/src/components/ResponsiveHorizontalGallery.js +6 -42
  80. package/dist/dist-esm/react-components/src/components/ResponsiveHorizontalGallery.js.map +1 -1
  81. package/dist/dist-esm/react-components/src/components/ResponsiveVerticalGallery.d.ts +35 -0
  82. package/dist/dist-esm/react-components/src/components/ResponsiveVerticalGallery.js +32 -0
  83. package/dist/dist-esm/react-components/src/components/ResponsiveVerticalGallery.js.map +1 -0
  84. package/dist/dist-esm/react-components/src/components/SendBox.js +5 -2
  85. package/dist/dist-esm/react-components/src/components/SendBox.js.map +1 -1
  86. package/dist/dist-esm/react-components/src/components/VerticalGallery.d.ts +67 -0
  87. package/dist/dist-esm/react-components/src/components/VerticalGallery.js +113 -0
  88. package/dist/dist-esm/react-components/src/components/VerticalGallery.js.map +1 -0
  89. package/dist/dist-esm/react-components/src/components/VideoEffects/PresetVideoEffectsItems.d.ts +21 -0
  90. package/dist/dist-esm/react-components/src/components/VideoEffects/PresetVideoEffectsItems.js +65 -0
  91. package/dist/dist-esm/react-components/src/components/VideoEffects/PresetVideoEffectsItems.js.map +1 -0
  92. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.d.ts +75 -0
  93. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js +44 -0
  94. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js.map +1 -0
  95. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.d.ts +88 -0
  96. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js +80 -0
  97. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js.map +1 -0
  98. package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.d.ts +1 -1
  99. package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js +55 -19
  100. package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js.map +1 -1
  101. package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.d.ts +10 -3
  102. package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.js +11 -9
  103. package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.js.map +1 -1
  104. package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.d.ts +1 -1
  105. package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js +81 -24
  106. package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map +1 -1
  107. package/dist/dist-esm/react-components/src/components/VideoGallery/Layout.d.ts +11 -1
  108. package/dist/dist-esm/react-components/src/components/VideoGallery/Layout.js.map +1 -1
  109. package/dist/dist-esm/react-components/src/components/VideoGallery/OverflowGallery.d.ts +21 -0
  110. package/dist/dist-esm/react-components/src/components/VideoGallery/OverflowGallery.js +63 -0
  111. package/dist/dist-esm/react-components/src/components/VideoGallery/OverflowGallery.js.map +1 -0
  112. package/dist/dist-esm/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.d.ts +2 -1
  113. package/dist/dist-esm/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.js +8 -2
  114. package/dist/dist-esm/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.js.map +1 -1
  115. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.d.ts +32 -7
  116. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js +28 -12
  117. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js.map +1 -1
  118. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.js +2 -2
  119. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.js.map +1 -1
  120. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.d.ts +4 -1
  121. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.js +8 -7
  122. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.js.map +1 -1
  123. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.d.ts +64 -0
  124. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.js +79 -0
  125. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.js.map +1 -0
  126. package/dist/dist-esm/react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.d.ts +25 -0
  127. package/dist/dist-esm/react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.js +94 -0
  128. package/dist/dist-esm/react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.js.map +1 -0
  129. package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.d.ts +4 -4
  130. package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js +58 -49
  131. package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js.map +1 -1
  132. package/dist/dist-esm/react-components/src/components/VideoGallery.d.ts +25 -0
  133. package/dist/dist-esm/react-components/src/components/VideoGallery.js +32 -4
  134. package/dist/dist-esm/react-components/src/components/VideoGallery.js.map +1 -1
  135. package/dist/dist-esm/react-components/src/components/VideoTile.js +9 -12
  136. package/dist/dist-esm/react-components/src/components/VideoTile.js.map +1 -1
  137. package/dist/dist-esm/react-components/src/components/index.d.ts +8 -0
  138. package/dist/dist-esm/react-components/src/components/index.js +4 -0
  139. package/dist/dist-esm/react-components/src/components/index.js.map +1 -1
  140. package/dist/dist-esm/react-components/src/components/styles/CaptionsBanner.style.d.ts +13 -0
  141. package/dist/dist-esm/react-components/src/components/styles/CaptionsBanner.style.js +35 -0
  142. package/dist/dist-esm/react-components/src/components/styles/CaptionsBanner.style.js.map +1 -0
  143. package/dist/dist-esm/react-components/src/components/styles/HorizontalGallery.styles.js +1 -0
  144. package/dist/dist-esm/react-components/src/components/styles/HorizontalGallery.styles.js.map +1 -1
  145. package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.d.ts +2 -2
  146. package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.js +30 -2
  147. package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.js.map +1 -1
  148. package/dist/dist-esm/react-components/src/components/styles/VerticalGallery.styles.d.ts +32 -0
  149. package/dist/dist-esm/react-components/src/components/styles/VerticalGallery.styles.js +66 -0
  150. package/dist/dist-esm/react-components/src/components/styles/VerticalGallery.styles.js.map +1 -0
  151. package/dist/dist-esm/react-components/src/components/utils/overFlowGalleriesUtils.d.ts +11 -0
  152. package/dist/dist-esm/react-components/src/components/utils/overFlowGalleriesUtils.js +22 -0
  153. package/dist/dist-esm/react-components/src/components/utils/overFlowGalleriesUtils.js.map +1 -0
  154. package/dist/dist-esm/react-components/src/components/utils/responsive.d.ts +6 -0
  155. package/dist/dist-esm/react-components/src/components/utils/responsive.js +7 -0
  156. package/dist/dist-esm/react-components/src/components/utils/responsive.js.map +1 -1
  157. package/dist/dist-esm/react-components/src/components/utils.d.ts +5 -0
  158. package/dist/dist-esm/react-components/src/components/utils.js +20 -0
  159. package/dist/dist-esm/react-components/src/components/utils.js.map +1 -1
  160. package/dist/dist-esm/react-components/src/gallery/dominantSpeaker.js +6 -14
  161. package/dist/dist-esm/react-components/src/gallery/dominantSpeaker.js.map +1 -1
  162. package/dist/dist-esm/react-components/src/identifiers/IdentifierProvider.d.ts +10 -4
  163. package/dist/dist-esm/react-components/src/identifiers/IdentifierProvider.js +7 -2
  164. package/dist/dist-esm/react-components/src/identifiers/IdentifierProvider.js.map +1 -1
  165. package/dist/dist-esm/react-components/src/localization/LocalizationProvider.d.ts +5 -0
  166. package/dist/dist-esm/react-components/src/localization/LocalizationProvider.js.map +1 -1
  167. package/dist/dist-esm/react-components/src/localization/locales/de-DE/strings.json +14 -3
  168. package/dist/dist-esm/react-components/src/localization/locales/en-GB/strings.json +14 -3
  169. package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json +14 -3
  170. package/dist/dist-esm/react-components/src/localization/locales/es-ES/strings.json +14 -3
  171. package/dist/dist-esm/react-components/src/localization/locales/fr-FR/strings.json +14 -3
  172. package/dist/dist-esm/react-components/src/localization/locales/it-IT/strings.json +14 -3
  173. package/dist/dist-esm/react-components/src/localization/locales/ja-JP/strings.json +14 -3
  174. package/dist/dist-esm/react-components/src/localization/locales/ko-KR/strings.json +14 -3
  175. package/dist/dist-esm/react-components/src/localization/locales/nl-NL/strings.json +14 -3
  176. package/dist/dist-esm/react-components/src/localization/locales/pt-BR/strings.json +14 -3
  177. package/dist/dist-esm/react-components/src/localization/locales/ru-RU/strings.json +14 -3
  178. package/dist/dist-esm/react-components/src/localization/locales/tr-TR/strings.json +14 -3
  179. package/dist/dist-esm/react-components/src/localization/locales/zh-CN/strings.json +14 -3
  180. package/dist/dist-esm/react-components/src/localization/locales/zh-TW/strings.json +14 -3
  181. package/dist/dist-esm/react-components/src/theming/icons.d.ts +7 -0
  182. package/dist/dist-esm/react-components/src/theming/icons.js +19 -7
  183. package/dist/dist-esm/react-components/src/theming/icons.js.map +1 -1
  184. package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js.map +1 -1
  185. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.d.ts +4 -0
  186. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js +27 -2
  187. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js.map +1 -1
  188. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapter.d.ts +42 -0
  189. package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapter.js.map +1 -1
  190. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js +8 -2
  191. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js.map +1 -1
  192. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js +1 -1
  193. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js.map +1 -1
  194. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js +21 -3
  195. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js.map +1 -1
  196. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/NetworkReconnectTile.js +1 -1
  197. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/NetworkReconnectTile.js.map +1 -1
  198. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.d.ts +5 -4
  199. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.js +3 -1
  200. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.js.map +1 -1
  201. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Custom.d.ts +0 -5
  202. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Custom.js +1 -31
  203. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Custom.js.map +1 -1
  204. package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useHandlers.js +12 -0
  205. package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useHandlers.js.map +1 -1
  206. package/dist/dist-esm/react-composites/src/composites/CallComposite/index.d.ts +1 -0
  207. package/dist/dist-esm/react-composites/src/composites/CallComposite/index.js.map +1 -1
  208. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js +1 -1
  209. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js.map +1 -1
  210. package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/MediaGalleryUtils.d.ts +1 -1
  211. package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/MediaGalleryUtils.js +3 -3
  212. package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/MediaGalleryUtils.js.map +1 -1
  213. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js +11 -1
  214. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js.map +1 -1
  215. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatControlBar.d.ts +1 -0
  216. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatControlBar.js +12 -8
  217. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatControlBar.js.map +1 -1
  218. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CustomButton.d.ts +16 -3
  219. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CustomButton.js +49 -43
  220. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CustomButton.js.map +1 -1
  221. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.d.ts +4 -0
  222. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js +24 -0
  223. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js.map +1 -1
  224. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.d.ts +19 -0
  225. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.js.map +1 -1
  226. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.d.ts +4 -0
  227. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.js +18 -0
  228. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.js.map +1 -1
  229. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/components/DesktopMoreButton.d.ts +2 -0
  230. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/components/DesktopMoreButton.js +47 -26
  231. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/components/DesktopMoreButton.js.map +1 -1
  232. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/components/MoreDrawer.js +4 -4
  233. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/components/MoreDrawer.js.map +1 -1
  234. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/styles/CallWithChatCompositeStyles.d.ts +1 -1
  235. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/styles/CallWithChatCompositeStyles.js +5 -3
  236. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/styles/CallWithChatCompositeStyles.js.map +1 -1
  237. package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js +16 -1
  238. package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js.map +1 -1
  239. package/dist/dist-esm/react-composites/src/composites/common/ParticipantContainer.js +1 -1
  240. package/dist/dist-esm/react-composites/src/composites/common/ParticipantContainer.js.map +1 -1
  241. package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.d.ts +11 -0
  242. package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js +19 -0
  243. package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js.map +1 -0
  244. package/dist/dist-esm/react-composites/src/composites/common/icons.d.ts +7 -0
  245. package/dist/dist-esm/react-composites/src/composites/common/icons.js +4 -4
  246. package/dist/dist-esm/react-composites/src/composites/common/icons.js.map +1 -1
  247. package/dist/dist-esm/react-composites/src/composites/common/styles/Composite.styles.d.ts +7 -0
  248. package/dist/dist-esm/react-composites/src/composites/common/styles/Composite.styles.js +9 -0
  249. package/dist/dist-esm/react-composites/src/composites/common/styles/Composite.styles.js.map +1 -0
  250. package/package.json +12 -12
  251. package/dist/dist-esm/react-components/src/components/VideoGallery/VideoGalleryResponsiveHorizontalGallery.d.ts +0 -14
  252. package/dist/dist-esm/react-components/src/components/VideoGallery/VideoGalleryResponsiveHorizontalGallery.js +0 -19
  253. package/dist/dist-esm/react-components/src/components/VideoGallery/VideoGalleryResponsiveHorizontalGallery.js.map +0 -1
@@ -13,7 +13,7 @@ import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../acs-ui
13
13
  *
14
14
  * @private
15
15
  */
16
- export const generateDefaultDeviceMenuProps = (props, strings, isSelectCamAllowed = true, isSelectMicAllowed = true) => {
16
+ export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem, isSelectCamAllowed = true, isSelectMicAllowed = true) => {
17
17
  var _a, _b;
18
18
  const { microphones, speakers, cameras, selectedMicrophone, selectedSpeaker, selectedCamera, onSelectCamera, onSelectMicrophone, onSelectSpeaker } = props;
19
19
  const defaultMenuProps = {
@@ -34,88 +34,112 @@ export const generateDefaultDeviceMenuProps = (props, strings, isSelectCamAllowe
34
34
  const menuItemStyles = merge(buttonFlyoutItemStyles, (_b = (_a = props.styles) === null || _a === void 0 ? void 0 : _a.menuItemStyles) !== null && _b !== void 0 ? _b : {});
35
35
  if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {
36
36
  defaultMenuProps.items.push({
37
- key: 'sectionCamera',
38
- title: strings.cameraMenuTooltip,
37
+ key: 'cameras',
39
38
  itemType: ContextualMenuItemType.Section,
40
39
  sectionProps: {
41
40
  title: strings.cameraMenuTitle,
42
- items: cameras.map((camera) => ({
43
- key: camera.id,
44
- text: camera.name,
45
- title: camera.name,
46
- iconProps: { iconName: 'OptionsCamera', styles: { root: { lineHeight: 0 } } },
47
- itemProps: {
48
- styles: menuItemStyles
49
- },
50
- canCheck: true,
51
- isChecked: camera.id === (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id),
52
- onClick: () => {
53
- if (camera.id !== (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id)) {
54
- onSelectCamera(camera);
55
- }
41
+ items: [
42
+ {
43
+ key: 'sectionCamera',
44
+ title: strings.cameraMenuTooltip,
45
+ subMenuProps: {
46
+ items: cameras.map((camera) => ({
47
+ key: camera.id,
48
+ text: camera.name,
49
+ title: camera.name,
50
+ itemProps: {
51
+ styles: menuItemStyles
52
+ },
53
+ canCheck: true,
54
+ isChecked: camera.id === (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id),
55
+ onClick: () => {
56
+ if (camera.id !== (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id)) {
57
+ onSelectCamera(camera);
58
+ }
59
+ }
60
+ }))
61
+ },
62
+ text: selectedCamera.name
56
63
  }
57
- }))
64
+ ]
58
65
  }
59
66
  });
67
+ if (primaryActionItem) {
68
+ defaultMenuProps.items.push(primaryActionItem);
69
+ }
60
70
  }
61
71
  if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {
62
72
  // Set props as Microphone if speakers can be enumerated else set as Audio Device
63
73
  const speakersAvailable = speakers && speakers.length > 0;
64
74
  const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';
65
75
  const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;
66
- const sectionPropsTitle = speakersAvailable ? strings.microphoneMenuTitle : strings.audioDeviceMenuTitle;
67
- const iconName = speakersAvailable ? 'OptionsMic' : 'OptionsSpeaker';
68
76
  defaultMenuProps.items.push({
69
- key: key,
70
- title: title,
77
+ key: 'microphones',
71
78
  itemType: ContextualMenuItemType.Section,
72
79
  sectionProps: {
73
- title: sectionPropsTitle,
74
- items: microphones.map((microphone) => ({
75
- key: microphone.id,
76
- text: microphone.name,
77
- title: microphone.name,
78
- iconProps: { iconName: iconName, styles: { root: { lineHeight: 0 } } },
79
- itemProps: {
80
- styles: menuItemStyles
81
- },
82
- canCheck: true,
83
- isChecked: microphone.id === (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id),
84
- onClick: () => {
85
- if (microphone.id !== (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id)) {
86
- onSelectMicrophone(microphone);
87
- }
80
+ title: strings.microphoneMenuTitle,
81
+ items: [
82
+ {
83
+ key: key,
84
+ title: title,
85
+ subMenuProps: {
86
+ items: microphones.map((microphone) => ({
87
+ key: microphone.id,
88
+ text: microphone.name,
89
+ title: microphone.name,
90
+ itemProps: {
91
+ styles: menuItemStyles
92
+ },
93
+ canCheck: true,
94
+ isChecked: microphone.id === (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id),
95
+ onClick: () => {
96
+ if (microphone.id !== (selectedMicrophone === null || selectedMicrophone === void 0 ? void 0 : selectedMicrophone.id)) {
97
+ onSelectMicrophone(microphone);
98
+ }
99
+ }
100
+ }))
101
+ },
102
+ text: selectedMicrophone.name
88
103
  }
89
- }))
104
+ ]
90
105
  }
91
106
  });
92
107
  }
93
108
  if (speakers && selectedSpeaker && onSelectSpeaker) {
94
109
  defaultMenuProps.items.push({
95
- key: 'sectionSpeaker',
96
- title: strings.speakerMenuTooltip,
110
+ key: 'speakers',
97
111
  itemType: ContextualMenuItemType.Section,
98
112
  sectionProps: {
99
113
  title: strings.speakerMenuTitle,
100
- items: speakers.map((speaker) => ({
101
- key: speaker.id,
102
- text: speaker.name,
103
- title: speaker.name,
104
- iconProps: { iconName: 'OptionsSpeaker', styles: { root: { lineHeight: 0 } } },
105
- itemProps: {
106
- styles: menuItemStyles
107
- },
108
- canCheck: true,
109
- isChecked: speaker.id === (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id),
110
- onClick: () => {
111
- if (speaker.id !== (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id)) {
112
- onSelectSpeaker(speaker);
113
- }
114
+ items: [
115
+ {
116
+ key: 'sectionSpeaker',
117
+ subMenuProps: {
118
+ items: speakers.map((speaker) => ({
119
+ key: speaker.id,
120
+ text: speaker.name,
121
+ title: speaker.name,
122
+ itemProps: {
123
+ styles: menuItemStyles
124
+ },
125
+ canCheck: true,
126
+ isChecked: speaker.id === (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id),
127
+ onClick: () => {
128
+ if (speaker.id !== (selectedSpeaker === null || selectedSpeaker === void 0 ? void 0 : selectedSpeaker.id)) {
129
+ onSelectSpeaker(speaker);
130
+ }
131
+ }
132
+ }))
133
+ },
134
+ text: selectedSpeaker.name
114
135
  }
115
- }))
136
+ ]
116
137
  }
117
138
  });
118
139
  }
140
+ if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {
141
+ defaultMenuProps.items.push(primaryActionItem);
142
+ }
119
143
  if (defaultMenuProps.items.length === 0) {
120
144
  // Avoids creating an empty context menu.
121
145
  return undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n ContextualMenuItemType,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n IContextualMenuProps,\n IContextualMenuStyles,\n merge\n} from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link DevicesButton} menu.\n *\n * @public\n */\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n /**\n * Styles for the items inside the {@link DevicesButton} button menu.\n */\n menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the Devices button menu items.\n *\n * @public\n */\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n /**\n * Styles for the {@link DevicesButton} menu.\n */\n menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/**\n * A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n *\n * @public\n */\nexport interface OptionsDevice {\n /**\n * Device unique identifier\n */\n id: string;\n /**\n * Device name\n */\n name: string;\n}\n\n/**\n * Strings of {@link DevicesButton} that can be overridden.\n *\n * @public\n */\nexport interface DevicesButtonStrings {\n /**\n * Label of button\n */\n label: string;\n /**\n * Button tooltip content.\n */\n tooltipContent?: string;\n /**\n * Title of camera menu\n */\n cameraMenuTitle: string;\n /**\n * Title of microphone menu\n */\n microphoneMenuTitle: string;\n /**\n * Title of speaker menu\n */\n speakerMenuTitle: string;\n /**\n * Tooltip of camera menu\n */\n cameraMenuTooltip: string;\n /**\n * Tooltip of microphone menu\n */\n microphoneMenuTooltip: string;\n /**\n * Tooltip of speaker menu\n */\n speakerMenuTooltip: string;\n}\n\n/**\n * Props for {@link DevicesButton}.\n *\n * @public\n */\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n /**\n * Available microphones for selection\n */\n microphones?: OptionsDevice[];\n /**\n * Available speakers for selection\n */\n speakers?: OptionsDevice[];\n /**\n * Available cameras for selection\n */\n cameras?: OptionsDevice[];\n /**\n * Microphone that is shown as currently selected\n */\n selectedMicrophone?: OptionsDevice;\n /**\n * Speaker that is shown as currently selected\n */\n selectedSpeaker?: OptionsDevice;\n /**\n * Camera that is shown as currently selected\n */\n selectedCamera?: OptionsDevice;\n /**\n * Callback when a camera is selected\n */\n onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n /**\n * Callback when a microphone is selected\n */\n onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n /**\n * Speaker when a speaker is selected\n */\n onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n /**\n * Optional strings to override in component\n */\n strings?: Partial<DevicesButtonStrings>;\n /**\n * Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n * Recommended for mobile devices.\n */\n styles?: DevicesButtonStyles;\n}\n\n/**\n * Subset props for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuProps {\n microphones?: OptionsDevice[];\n speakers?: OptionsDevice[];\n cameras?: OptionsDevice[];\n selectedMicrophone?: OptionsDevice;\n selectedSpeaker?: OptionsDevice;\n selectedCamera?: OptionsDevice;\n onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n styles?: Partial<DeviceMenuStyles>;\n}\n\n/**\n * Subset of strings for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuStrings {\n /**\n * Title for Camera section in the contextual menu\n */\n cameraMenuTitle?: string;\n /**\n * Title for Audio Device section in the contextual menu\n *\n * @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n */\n audioDeviceMenuTitle?: string;\n /**\n * Title for Microphone section in the contextual menu\n *\n * @remark Used when speakers can be enumerated\n */\n microphoneMenuTitle?: string;\n /**\n * Title for Speaker section in the contextual menu\n */\n speakerMenuTitle?: string;\n /**\n * Tooltip label for Camera section in the contextual menu\n */\n cameraMenuTooltip?: string;\n /**\n * Tooltip label for Audio Device section in the contextual menu\n *\n * @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n */\n audioDeviceMenuTooltip?: string;\n /**\n * Tooltip label for Microphone section in the contextual menu\n *\n * @remark Used when speakers can be enumerated\n */\n microphoneMenuTooltip?: string;\n /**\n * Tooltip label for Speaker section in the contextual menu\n */\n speakerMenuTooltip?: string;\n}\n\n/**\n * Styles for flyouts used by various buttons for device selection flyouts.\n *\n * @private\n */\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n *\n * @private\n */\nexport const generateDefaultDeviceMenuProps = (\n props: DeviceMenuProps,\n strings: DeviceMenuStrings,\n isSelectCamAllowed = true,\n isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } | undefined => {\n const {\n microphones,\n speakers,\n cameras,\n selectedMicrophone,\n selectedSpeaker,\n selectedCamera,\n onSelectCamera,\n onSelectMicrophone,\n onSelectSpeaker\n } = props;\n\n const defaultMenuProps: IContextualMenuProps = {\n items: [],\n styles: props.styles,\n calloutProps: {\n styles: {\n root: {\n // Confine the menu to the parents bounds.\n // More info: https://github.com/microsoft/fluentui/issues/18835\n // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n maxWidth: '95%'\n }\n },\n preventDismissOnEvent\n }\n };\n\n const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n defaultMenuProps.items.push({\n key: 'sectionCamera',\n title: strings.cameraMenuTooltip,\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.cameraMenuTitle,\n items: cameras.map((camera) => ({\n key: camera.id,\n text: camera.name,\n title: camera.name,\n iconProps: { iconName: 'OptionsCamera', styles: { root: { lineHeight: 0 } } },\n itemProps: {\n styles: menuItemStyles\n },\n canCheck: true,\n isChecked: camera.id === selectedCamera?.id,\n onClick: () => {\n if (camera.id !== selectedCamera?.id) {\n onSelectCamera(camera);\n }\n }\n }))\n }\n });\n }\n\n if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n // Set props as Microphone if speakers can be enumerated else set as Audio Device\n const speakersAvailable = speakers && speakers.length > 0;\n const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n const sectionPropsTitle = speakersAvailable ? strings.microphoneMenuTitle : strings.audioDeviceMenuTitle;\n const iconName = speakersAvailable ? 'OptionsMic' : 'OptionsSpeaker';\n\n defaultMenuProps.items.push({\n key: key,\n title: title,\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: sectionPropsTitle,\n items: microphones.map((microphone) => ({\n key: microphone.id,\n text: microphone.name,\n title: microphone.name,\n iconProps: { iconName: iconName, styles: { root: { lineHeight: 0 } } },\n itemProps: {\n styles: menuItemStyles\n },\n canCheck: true,\n isChecked: microphone.id === selectedMicrophone?.id,\n onClick: () => {\n if (microphone.id !== selectedMicrophone?.id) {\n onSelectMicrophone(microphone);\n }\n }\n }))\n }\n });\n }\n\n if (speakers && selectedSpeaker && onSelectSpeaker) {\n defaultMenuProps.items.push({\n key: 'sectionSpeaker',\n title: strings.speakerMenuTooltip,\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.speakerMenuTitle,\n items: speakers.map((speaker) => ({\n key: speaker.id,\n text: speaker.name,\n title: speaker.name,\n iconProps: { iconName: 'OptionsSpeaker', styles: { root: { lineHeight: 0 } } },\n itemProps: {\n styles: menuItemStyles\n },\n canCheck: true,\n isChecked: speaker.id === selectedSpeaker?.id,\n onClick: () => {\n if (speaker.id !== selectedSpeaker?.id) {\n onSelectSpeaker(speaker);\n }\n }\n }))\n }\n });\n }\n\n if (defaultMenuProps.items.length === 0) {\n // Avoids creating an empty context menu.\n return undefined;\n }\n return defaultMenuProps;\n};\n\n/**\n * A button to open a menu that controls device options.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n const { onRenderIcon } = props;\n\n const localeStrings = useLocale().strings.devicesButton;\n const strings = { ...localeStrings, ...props.strings };\n\n const devicesButtonMenu =\n props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n const onRenderOptionsIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n };\n\n return (\n <ControlBarButton\n {...props}\n menuProps={devicesButtonMenu}\n menuIconProps={{ hidden: true }}\n onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'devicesButtonLabel'}\n />\n );\n};\n\"../../../acs-ui-common/src\""]}
1
+ {"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,sBAAsB,EAKtB,KAAK,EACN,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAiD,MAAM,oBAAoB,CAAC;AACrG,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,sBAAsB,IAAI,qBAAqB,EAAE,mCAAgC;AAkN1F;;;;;GAKG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAC5C,KAAsB,EACtB,OAA0B,EAC1B,iBAAuC,EACvC,kBAAkB,GAAG,IAAI,EACzB,kBAAkB,GAAG,IAAI,EACqB,EAAE;;IAChD,MAAM,EACJ,WAAW,EACX,QAAQ,EACR,OAAO,EACP,kBAAkB,EAClB,eAAe,EACf,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,eAAe,EAChB,GAAG,KAAK,CAAC;IAEV,MAAM,gBAAgB,GAAyB;QAC7C,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,YAAY,EAAE;YACZ,MAAM,EAAE;gBACN,IAAI,EAAE;oBACJ,0CAA0C;oBAC1C,gEAAgE;oBAChE,6EAA6E;oBAC7E,QAAQ,EAAE,KAAK;iBAChB;aACF;YACD,qBAAqB;SACtB;KACF,CAAC;IAEF,MAAM,cAAc,GAAG,KAAK,CAAC,sBAAsB,EAAE,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,cAAc,mCAAI,EAAE,CAAC,CAAC;IAEzF,IAAI,OAAO,IAAI,cAAc,IAAI,cAAc,IAAI,kBAAkB,EAAE;QACrE,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC;YAC1B,GAAG,EAAE,SAAS;YACd,QAAQ,EAAE,sBAAsB,CAAC,OAAO;YACxC,YAAY,EAAE;gBACZ,KAAK,EAAE,OAAO,CAAC,eAAe;gBAC9B,KAAK,EAAE;oBACL;wBACE,GAAG,EAAE,eAAe;wBACpB,KAAK,EAAE,OAAO,CAAC,iBAAiB;wBAChC,YAAY,EAAE;4BACZ,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;gCAC9B,GAAG,EAAE,MAAM,CAAC,EAAE;gCACd,IAAI,EAAE,MAAM,CAAC,IAAI;gCACjB,KAAK,EAAE,MAAM,CAAC,IAAI;gCAClB,SAAS,EAAE;oCACT,MAAM,EAAE,cAAc;iCACvB;gCACD,QAAQ,EAAE,IAAI;gCACd,SAAS,EAAE,MAAM,CAAC,EAAE,MAAK,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,EAAE,CAAA;gCAC3C,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,MAAM,CAAC,EAAE,MAAK,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,EAAE,CAAA,EAAE;wCACpC,cAAc,CAAC,MAAM,CAAC,CAAC;qCACxB;gCACH,CAAC;6BACF,CAAC,CAAC;yBACJ;wBACD,IAAI,EAAE,cAAc,CAAC,IAAI;qBAC1B;iBACF;aACF;SACF,CAAC,CAAC;QACH,IAAI,iBAAiB,EAAE;YACrB,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAChD;KACF;IAED,IAAI,WAAW,IAAI,kBAAkB,IAAI,kBAAkB,IAAI,kBAAkB,EAAE;QACjF,iFAAiF;QACjF,MAAM,iBAAiB,GAAG,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QAC1D,MAAM,GAAG,GAAG,iBAAiB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,oBAAoB,CAAC;QAC3E,MAAM,KAAK,GAAG,iBAAiB,CAAC,CAAC,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO,CAAC,sBAAsB,CAAC;QAEjG,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC;YAC1B,GAAG,EAAE,aAAa;YAClB,QAAQ,EAAE,sBAAsB,CAAC,OAAO;YACxC,YAAY,EAAE;gBACZ,KAAK,EAAE,OAAO,CAAC,mBAAmB;gBAClC,KAAK,EAAE;oBACL;wBACE,GAAG,EAAE,GAAG;wBACR,KAAK,EAAE,KAAK;wBACZ,YAAY,EAAE;4BACZ,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;gCACtC,GAAG,EAAE,UAAU,CAAC,EAAE;gCAClB,IAAI,EAAE,UAAU,CAAC,IAAI;gCACrB,KAAK,EAAE,UAAU,CAAC,IAAI;gCACtB,SAAS,EAAE;oCACT,MAAM,EAAE,cAAc;iCACvB;gCACD,QAAQ,EAAE,IAAI;gCACd,SAAS,EAAE,UAAU,CAAC,EAAE,MAAK,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,EAAE,CAAA;gCACnD,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,UAAU,CAAC,EAAE,MAAK,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,EAAE,CAAA,EAAE;wCAC5C,kBAAkB,CAAC,UAAU,CAAC,CAAC;qCAChC;gCACH,CAAC;6BACF,CAAC,CAAC;yBACJ;wBACD,IAAI,EAAE,kBAAkB,CAAC,IAAI;qBAC9B;iBACF;aACF;SACF,CAAC,CAAC;KACJ;IAED,IAAI,QAAQ,IAAI,eAAe,IAAI,eAAe,EAAE;QAClD,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC;YAC1B,GAAG,EAAE,UAAU;YACf,QAAQ,EAAE,sBAAsB,CAAC,OAAO;YACxC,YAAY,EAAE;gBACZ,KAAK,EAAE,OAAO,CAAC,gBAAgB;gBAC/B,KAAK,EAAE;oBACL;wBACE,GAAG,EAAE,gBAAgB;wBACrB,YAAY,EAAE;4BACZ,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;gCAChC,GAAG,EAAE,OAAO,CAAC,EAAE;gCACf,IAAI,EAAE,OAAO,CAAC,IAAI;gCAClB,KAAK,EAAE,OAAO,CAAC,IAAI;gCACnB,SAAS,EAAE;oCACT,MAAM,EAAE,cAAc;iCACvB;gCACD,QAAQ,EAAE,IAAI;gCACd,SAAS,EAAE,OAAO,CAAC,EAAE,MAAK,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,EAAE,CAAA;gCAC7C,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,OAAO,CAAC,EAAE,MAAK,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,EAAE,CAAA,EAAE;wCACtC,eAAe,CAAC,OAAO,CAAC,CAAC;qCAC1B;gCACH,CAAC;6BACF,CAAC,CAAC;yBACJ;wBACD,IAAI,EAAE,eAAe,CAAC,IAAI;qBAC3B;iBACF;aACF;SACF,CAAC,CAAC;KACJ;IACD,IAAI,WAAW,IAAI,kBAAkB,IAAI,kBAAkB,IAAI,kBAAkB,IAAI,iBAAiB,EAAE;QACtG,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAChD;IAED,IAAI,gBAAgB,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACvC,yCAAyC;QACzC,OAAO,SAAS,CAAC;KAClB;IACD,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAe,EAAE;;IACtE,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAE/B,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC;IACxD,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IAEvD,MAAM,iBAAiB,GACrB,MAAA,KAAK,CAAC,SAAS,mCAAI,8BAA8B,iCAAM,KAAK,KAAE,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,UAAU,KAAI,OAAO,CAAC,CAAC;IAE7G,MAAM,mBAAmB,GAAG,GAAgB,EAAE;QAC5C,OAAO,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,QAAQ,EAAC,sBAAsB,GAAG,CAAC;IAC9F,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,gBAAgB,oBACX,KAAK,IACT,SAAS,EAAE,iBAAiB,EAC5B,aAAa,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EAC/B,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,mBAAmB,EACjD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,oBAAoB,IAChD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport {\n ContextualMenuItemType,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n IContextualMenuProps,\n IContextualMenuStyles,\n merge\n} from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/**\n * Styles for the {@link DevicesButton} menu.\n *\n * @public\n */\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n /**\n * Styles for the items inside the {@link DevicesButton} button menu.\n */\n menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Styles for the Devices button menu items.\n *\n * @public\n */\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n /**\n * Styles for the {@link DevicesButton} menu.\n */\n menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/**\n * A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n *\n * @public\n */\nexport interface OptionsDevice {\n /**\n * Device unique identifier\n */\n id: string;\n /**\n * Device name\n */\n name: string;\n}\n\n/**\n * Strings of {@link DevicesButton} that can be overridden.\n *\n * @public\n */\nexport interface DevicesButtonStrings {\n /**\n * Label of button\n */\n label: string;\n /**\n * Button tooltip content.\n */\n tooltipContent?: string;\n /**\n * Title of camera menu\n */\n cameraMenuTitle: string;\n /**\n * Title of microphone menu\n */\n microphoneMenuTitle: string;\n /**\n * Title of speaker menu\n */\n speakerMenuTitle: string;\n /**\n * Tooltip of camera menu\n */\n cameraMenuTooltip: string;\n /**\n * Tooltip of microphone menu\n */\n microphoneMenuTooltip: string;\n /**\n * Tooltip of speaker menu\n */\n speakerMenuTooltip: string;\n}\n\n/**\n * Props for {@link DevicesButton}.\n *\n * @public\n */\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n /**\n * Available microphones for selection\n */\n microphones?: OptionsDevice[];\n /**\n * Available speakers for selection\n */\n speakers?: OptionsDevice[];\n /**\n * Available cameras for selection\n */\n cameras?: OptionsDevice[];\n /**\n * Microphone that is shown as currently selected\n */\n selectedMicrophone?: OptionsDevice;\n /**\n * Speaker that is shown as currently selected\n */\n selectedSpeaker?: OptionsDevice;\n /**\n * Camera that is shown as currently selected\n */\n selectedCamera?: OptionsDevice;\n /**\n * Callback when a camera is selected\n */\n onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n /**\n * Callback when a microphone is selected\n */\n onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n /**\n * Speaker when a speaker is selected\n */\n onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n /**\n * Optional strings to override in component\n */\n strings?: Partial<DevicesButtonStrings>;\n /**\n * Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n * Recommended for mobile devices.\n */\n styles?: DevicesButtonStyles;\n}\n\n/**\n * Subset props for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuProps {\n microphones?: OptionsDevice[];\n speakers?: OptionsDevice[];\n cameras?: OptionsDevice[];\n selectedMicrophone?: OptionsDevice;\n selectedSpeaker?: OptionsDevice;\n selectedCamera?: OptionsDevice;\n onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n styles?: Partial<DeviceMenuStyles>;\n}\n\n/**\n * Subset of strings for various buttons that show device selection menus.\n *\n * @private\n */\nexport interface DeviceMenuStrings {\n /**\n * Title for Camera section in the contextual menu\n */\n cameraMenuTitle?: string;\n /**\n * Title for Audio Device section in the contextual menu\n *\n * @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n */\n audioDeviceMenuTitle?: string;\n /**\n * Title for Microphone section in the contextual menu\n *\n * @remark Used when speakers can be enumerated\n */\n microphoneMenuTitle?: string;\n /**\n * Title for Speaker section in the contextual menu\n */\n speakerMenuTitle?: string;\n /**\n * Tooltip label for Camera section in the contextual menu\n */\n cameraMenuTooltip?: string;\n /**\n * Tooltip label for Audio Device section in the contextual menu\n *\n * @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n */\n audioDeviceMenuTooltip?: string;\n /**\n * Tooltip label for Microphone section in the contextual menu\n *\n * @remark Used when speakers can be enumerated\n */\n microphoneMenuTooltip?: string;\n /**\n * Tooltip label for Speaker section in the contextual menu\n */\n speakerMenuTooltip?: string;\n}\n\n/**\n * Styles for flyouts used by various buttons for device selection flyouts.\n *\n * @private\n */\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/**\n * Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n *\n * @private\n */\nexport const generateDefaultDeviceMenuProps = (\n props: DeviceMenuProps,\n strings: DeviceMenuStrings,\n primaryActionItem?: IContextualMenuItem,\n isSelectCamAllowed = true,\n isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } | undefined => {\n const {\n microphones,\n speakers,\n cameras,\n selectedMicrophone,\n selectedSpeaker,\n selectedCamera,\n onSelectCamera,\n onSelectMicrophone,\n onSelectSpeaker\n } = props;\n\n const defaultMenuProps: IContextualMenuProps = {\n items: [],\n styles: props.styles,\n calloutProps: {\n styles: {\n root: {\n // Confine the menu to the parents bounds.\n // More info: https://github.com/microsoft/fluentui/issues/18835\n // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n maxWidth: '95%'\n }\n },\n preventDismissOnEvent\n }\n };\n\n const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n defaultMenuProps.items.push({\n key: 'cameras',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.cameraMenuTitle,\n items: [\n {\n key: 'sectionCamera',\n title: strings.cameraMenuTooltip,\n subMenuProps: {\n items: cameras.map((camera) => ({\n key: camera.id,\n text: camera.name,\n title: camera.name,\n itemProps: {\n styles: menuItemStyles\n },\n canCheck: true,\n isChecked: camera.id === selectedCamera?.id,\n onClick: () => {\n if (camera.id !== selectedCamera?.id) {\n onSelectCamera(camera);\n }\n }\n }))\n },\n text: selectedCamera.name\n }\n ]\n }\n });\n if (primaryActionItem) {\n defaultMenuProps.items.push(primaryActionItem);\n }\n }\n\n if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n // Set props as Microphone if speakers can be enumerated else set as Audio Device\n const speakersAvailable = speakers && speakers.length > 0;\n const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n\n defaultMenuProps.items.push({\n key: 'microphones',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.microphoneMenuTitle,\n items: [\n {\n key: key,\n title: title,\n subMenuProps: {\n items: microphones.map((microphone) => ({\n key: microphone.id,\n text: microphone.name,\n title: microphone.name,\n itemProps: {\n styles: menuItemStyles\n },\n canCheck: true,\n isChecked: microphone.id === selectedMicrophone?.id,\n onClick: () => {\n if (microphone.id !== selectedMicrophone?.id) {\n onSelectMicrophone(microphone);\n }\n }\n }))\n },\n text: selectedMicrophone.name\n }\n ]\n }\n });\n }\n\n if (speakers && selectedSpeaker && onSelectSpeaker) {\n defaultMenuProps.items.push({\n key: 'speakers',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.speakerMenuTitle,\n items: [\n {\n key: 'sectionSpeaker',\n subMenuProps: {\n items: speakers.map((speaker) => ({\n key: speaker.id,\n text: speaker.name,\n title: speaker.name,\n itemProps: {\n styles: menuItemStyles\n },\n canCheck: true,\n isChecked: speaker.id === selectedSpeaker?.id,\n onClick: () => {\n if (speaker.id !== selectedSpeaker?.id) {\n onSelectSpeaker(speaker);\n }\n }\n }))\n },\n text: selectedSpeaker.name\n }\n ]\n }\n });\n }\n if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {\n defaultMenuProps.items.push(primaryActionItem);\n }\n\n if (defaultMenuProps.items.length === 0) {\n // Avoids creating an empty context menu.\n return undefined;\n }\n return defaultMenuProps;\n};\n\n/**\n * A button to open a menu that controls device options.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n const { onRenderIcon } = props;\n\n const localeStrings = useLocale().strings.devicesButton;\n const strings = { ...localeStrings, ...props.strings };\n\n const devicesButtonMenu =\n props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n const onRenderOptionsIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n };\n\n return (\n <ControlBarButton\n {...props}\n menuProps={devicesButtonMenu}\n menuIconProps={{ hidden: true }}\n onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'devicesButtonLabel'}\n />\n );\n};\n\"../../../acs-ui-common/src\""]}
@@ -169,6 +169,10 @@ export interface ErrorBarStrings {
169
169
  * Generic message for when screen sharing fails
170
170
  */
171
171
  startScreenSharingGeneric?: string;
172
+ /**
173
+ * Error bar string letting you know remote participants see a frozen stream for you.
174
+ */
175
+ cameraFrozenForRemoteParticipants?: string;
172
176
  }
173
177
  /**
174
178
  * All errors that can be shown in the {@link ErrorBar}.
@@ -1 +1 @@
1
- {"version":3,"file":"ErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAoB,UAAU,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAEL,YAAY,EACZ,+BAA+B,EAC/B,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AAsOjB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAE/C,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CACP,GAAG,EAAE,CAAC,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,EACrG,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAC7C,CAAC;IAEF,MAAM,MAAM,GAAG,YAAY,CACzB,KAAK,CAAC,mBAAmB,EACzB,eAAe,EACf,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAChE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBAAY,iBAAiB,IAChC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,oBAAC,UAAU,oBACL,KAAK,IACT,MAAM,EAAE;YACN,SAAS,EAAE;gBACT,SAAS,EAAE,QAAQ;aACpB;YACD,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC;aACV;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,QAAQ;aACrB;SACF,EACD,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EACpD,SAAS,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,EACzE,sBAAsB,EAAE,OAAO,CAAC,sBAAsB,EACtD,gBAAgB,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,KAE9C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CACT,CACd,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { IMessageBarProps, MessageBar, Stack } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport {\n DismissedError,\n dismissError,\n dropDismissalsForInactiveErrors,\n errorsToShow,\n messageBarIconProps,\n messageBarType\n} from './utils';\n\n/**\n * Props for {@link ErrorBar}.\n *\n * In addition to the following, {@link ErrorBar} forwards all\n * {@link @fluentui/react#IMessageBarProps} to the underlying {@link @fluentui/react#MessageBar}.\n *\n * @public\n */\nexport interface ErrorBarProps extends IMessageBarProps {\n /**\n * Strings shown on the UI on errors.\n */\n strings?: ErrorBarStrings;\n\n /**\n * Currently active errors.\n */\n activeErrorMessages: ActiveErrorMessage[];\n\n /**\n * If set, errors with {@link ActiveErrorMessage.timestamp} older than the time this component is mounted\n * are not shown.\n *\n * This is useful when using the {@link ErrorBar} with a stateful client that handles more than one call\n * or chat thread. Set this prop to ignore errors from previous call or chat.\n *\n * @defaultValue false\n */\n ignorePremountErrors?: boolean;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link ErrorBar}.\n *\n * @public\n */\nexport interface ErrorBarStrings {\n /**\n * Unable to reach Chat service.\n *\n * This can mean:\n * - Incorrect Azure Communication Services endpoint was provided.\n * - User's network connection is down.\n */\n unableToReachChatService: string;\n\n /**\n * User does not have access to the Chat service.\n * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.\n */\n accessDenied: string;\n\n /**\n * User is no longer on the thread.\n *\n * See also: {@link ErrorBarStrings.sendMessageNotInChatThread} for a more specific error.\n */\n userNotInChatThread: string;\n\n /**\n * Sending message failed because user is no longer on the thread.\n */\n sendMessageNotInChatThread: string;\n\n /**\n * A generic message when sending message fails.\n * Prefer more specific error strings when possible.\n */\n sendMessageGeneric: string;\n\n /**\n * A generic message when starting video fails.\n */\n startVideoGeneric: string;\n\n /**\n * A generic message when starting video fails.\n */\n stopVideoGeneric: string;\n\n /**\n * A generic message when muting microphone fails.\n */\n muteGeneric: string;\n\n /**\n * A generic message when unmuting microphone fails.\n */\n unmuteGeneric: string;\n\n /**\n * A generic message when starting screenshare fails.\n */\n startScreenShareGeneric: string;\n\n /**\n * A generic message when stopping screenshare fails.\n */\n stopScreenShareGeneric: string;\n\n /**\n * Message shown when poor network quality is detected during a call.\n */\n callNetworkQualityLow: string;\n\n /**\n * Message shown on failure to detect audio output devices.\n */\n callNoSpeakerFound: string;\n\n /**\n * Message shown on failure to detect audio input devices.\n */\n callNoMicrophoneFound: string;\n\n /**\n * Message shown when microphone can be enumerated but access is blocked by the system.\n */\n callMicrophoneAccessDenied: string;\n\n /**\n * Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n */\n callMicrophoneAccessDeniedSafari: string;\n\n /**\n * Message shown when microphone is muted by the system (not by local or remote participants)\n */\n callMicrophoneMutedBySystem: string;\n\n /**\n * Message shown when microphone is unmuted by the system (not by local or remote participants).\n * This typically occurs if the system recovers from an unexpected mute.\n */\n callMicrophoneUnmutedBySystem: string;\n\n /**\n * Mac OS specific message shown when microphone can be enumerated but access is\n * blocked by the system.\n */\n callMacOsMicrophoneAccessDenied: string;\n\n /**\n * Message shown when poor network causes local video stream to be frozen.\n */\n callLocalVideoFreeze: string;\n\n /**\n * Message shown when camera can be enumerated but access is blocked by the system.\n */\n callCameraAccessDenied: string;\n\n /**\n * Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n */\n callCameraAccessDeniedSafari: string;\n\n /**\n * Message shown when local video fails to start because camera is already in use by\n * another applciation.\n */\n callCameraAlreadyInUse: string;\n\n /**\n * Message shown when local video is stopped by the system (not by local or remote participants)\n */\n callVideoStoppedBySystem: string;\n\n /**\n * Message shown when local video was recovered by the system (not by the local participant)\n */\n callVideoRecoveredBySystem: string;\n\n /**\n * Mac OS specific message shown when system denies access to camera.\n */\n callMacOsCameraAccessDenied: string;\n\n /**\n * Mac OS specific message shown when system denies sharing local screen on a call.\n */\n callMacOsScreenShareAccessDenied: string;\n /**\n * Dimiss errorbar button aria label read by screen reader accessibility tools\n */\n dismissButtonAriaLabel?: string;\n\n /**\n * An error message when joining a call fails.\n */\n failedToJoinCallGeneric?: string;\n\n /**\n * An error message when joining a call fails specifically due to an invalid meeting link.\n */\n failedToJoinCallInvalidMeetingLink?: string;\n /**\n * Generic message for when screen sharing fails\n */\n startScreenSharingGeneric?: string;\n}\n\n/**\n * All errors that can be shown in the {@link ErrorBar}.\n *\n * @public\n */\nexport type ErrorType = keyof ErrorBarStrings;\n\n/**\n * Active error messages to be shown via {@link ErrorBar}.\n *\n * @public\n */\nexport interface ActiveErrorMessage {\n /**\n * Type of error that is active.\n */\n type: ErrorType;\n /**\n * The latest timestamp when this error was observed.\n *\n * When available, this is used to track errors that have already been seen and dismissed\n * by the user.\n */\n timestamp?: Date;\n}\n\n/**\n * A component to show error messages on the UI.\n * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.\n * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.\n *\n * This component internally tracks dismissed by the user.\n * * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.\n * * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.\n * If the error recurs, it is shown in the UI.\n *\n * Uses {@link @fluentui/react#MessageBar} UI element.\n *\n * @public\n */\nexport const ErrorBar = (props: ErrorBarProps): JSX.Element => {\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n\n // Timestamp for when this comopnent is first mounted.\n // Never updated through the lifecycle of this component.\n const mountTimestamp = useRef(new Date(Date.now()));\n\n const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(\n () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)),\n [props.activeErrorMessages, dismissedErrors]\n );\n\n const toShow = errorsToShow(\n props.activeErrorMessages,\n dismissedErrors,\n props.ignorePremountErrors ? mountTimestamp.current : undefined\n );\n\n return (\n <Stack data-ui-id=\"error-bar-stack\">\n {toShow.map((error) => (\n <MessageBar\n {...props}\n styles={{\n innerText: {\n alignSelf: 'center'\n },\n icon: {\n height: 0\n },\n content: {\n lineHeight: 'inherit'\n },\n dismissal: {\n height: 0,\n paddingTop: '0.8rem'\n }\n }}\n key={error.type}\n messageBarType={messageBarType(error.type)}\n messageBarIconProps={messageBarIconProps(error.type)}\n onDismiss={() => setDismissedErrors(dismissError(dismissedErrors, error))}\n dismissButtonAriaLabel={strings.dismissButtonAriaLabel}\n dismissIconProps={{ iconName: 'ErrorBarClear' }}\n >\n {strings[error.type]}\n </MessageBar>\n ))}\n </Stack>\n );\n};\n"]}
1
+ {"version":3,"file":"ErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAoB,UAAU,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAEL,YAAY,EACZ,+BAA+B,EAC/B,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACf,MAAM,SAAS,CAAC;AA0OjB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAe,EAAE;;IAC5D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC;IACnD,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,aAAa,CAAC;IAE/C,sDAAsD;IACtD,yDAAyD;IACzD,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IAE7E,mGAAmG;IACnG,4EAA4E;IAC5E,SAAS,CACP,GAAG,EAAE,CAAC,kBAAkB,CAAC,+BAA+B,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC,EACrG,CAAC,KAAK,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAC7C,CAAC;IAEF,MAAM,MAAM,GAAG,YAAY,CACzB,KAAK,CAAC,mBAAmB,EACzB,eAAe,EACf,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAChE,CAAC;IAEF,OAAO,CACL,oBAAC,KAAK,kBAAY,iBAAiB,IAChC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,oBAAC,UAAU,oBACL,KAAK,IACT,MAAM,EAAE;YACN,SAAS,EAAE;gBACT,SAAS,EAAE,QAAQ;aACpB;YACD,IAAI,EAAE;gBACJ,MAAM,EAAE,CAAC;aACV;YACD,OAAO,EAAE;gBACP,UAAU,EAAE,SAAS;aACtB;YACD,SAAS,EAAE;gBACT,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,QAAQ;aACrB;SACF,EACD,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,cAAc,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,EAC1C,mBAAmB,EAAE,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,EACpD,SAAS,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,CAAC,EACzE,sBAAsB,EAAE,OAAO,CAAC,sBAAsB,EACtD,gBAAgB,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,KAE9C,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CACT,CACd,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { IMessageBarProps, MessageBar, Stack } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport {\n DismissedError,\n dismissError,\n dropDismissalsForInactiveErrors,\n errorsToShow,\n messageBarIconProps,\n messageBarType\n} from './utils';\n\n/**\n * Props for {@link ErrorBar}.\n *\n * In addition to the following, {@link ErrorBar} forwards all\n * {@link @fluentui/react#IMessageBarProps} to the underlying {@link @fluentui/react#MessageBar}.\n *\n * @public\n */\nexport interface ErrorBarProps extends IMessageBarProps {\n /**\n * Strings shown on the UI on errors.\n */\n strings?: ErrorBarStrings;\n\n /**\n * Currently active errors.\n */\n activeErrorMessages: ActiveErrorMessage[];\n\n /**\n * If set, errors with {@link ActiveErrorMessage.timestamp} older than the time this component is mounted\n * are not shown.\n *\n * This is useful when using the {@link ErrorBar} with a stateful client that handles more than one call\n * or chat thread. Set this prop to ignore errors from previous call or chat.\n *\n * @defaultValue false\n */\n ignorePremountErrors?: boolean;\n}\n\n/**\n * All strings that may be shown on the UI in the {@link ErrorBar}.\n *\n * @public\n */\nexport interface ErrorBarStrings {\n /**\n * Unable to reach Chat service.\n *\n * This can mean:\n * - Incorrect Azure Communication Services endpoint was provided.\n * - User's network connection is down.\n */\n unableToReachChatService: string;\n\n /**\n * User does not have access to the Chat service.\n * This usually means that either the Azure Communication Services endpiont or the token provided are incorrect.\n */\n accessDenied: string;\n\n /**\n * User is no longer on the thread.\n *\n * See also: {@link ErrorBarStrings.sendMessageNotInChatThread} for a more specific error.\n */\n userNotInChatThread: string;\n\n /**\n * Sending message failed because user is no longer on the thread.\n */\n sendMessageNotInChatThread: string;\n\n /**\n * A generic message when sending message fails.\n * Prefer more specific error strings when possible.\n */\n sendMessageGeneric: string;\n\n /**\n * A generic message when starting video fails.\n */\n startVideoGeneric: string;\n\n /**\n * A generic message when starting video fails.\n */\n stopVideoGeneric: string;\n\n /**\n * A generic message when muting microphone fails.\n */\n muteGeneric: string;\n\n /**\n * A generic message when unmuting microphone fails.\n */\n unmuteGeneric: string;\n\n /**\n * A generic message when starting screenshare fails.\n */\n startScreenShareGeneric: string;\n\n /**\n * A generic message when stopping screenshare fails.\n */\n stopScreenShareGeneric: string;\n\n /**\n * Message shown when poor network quality is detected during a call.\n */\n callNetworkQualityLow: string;\n\n /**\n * Message shown on failure to detect audio output devices.\n */\n callNoSpeakerFound: string;\n\n /**\n * Message shown on failure to detect audio input devices.\n */\n callNoMicrophoneFound: string;\n\n /**\n * Message shown when microphone can be enumerated but access is blocked by the system.\n */\n callMicrophoneAccessDenied: string;\n\n /**\n * Message shown when microphone can be enumerated but access is blocked by the system, for safari browsers\n */\n callMicrophoneAccessDeniedSafari: string;\n\n /**\n * Message shown when microphone is muted by the system (not by local or remote participants)\n */\n callMicrophoneMutedBySystem: string;\n\n /**\n * Message shown when microphone is unmuted by the system (not by local or remote participants).\n * This typically occurs if the system recovers from an unexpected mute.\n */\n callMicrophoneUnmutedBySystem: string;\n\n /**\n * Mac OS specific message shown when microphone can be enumerated but access is\n * blocked by the system.\n */\n callMacOsMicrophoneAccessDenied: string;\n\n /**\n * Message shown when poor network causes local video stream to be frozen.\n */\n callLocalVideoFreeze: string;\n\n /**\n * Message shown when camera can be enumerated but access is blocked by the system.\n */\n callCameraAccessDenied: string;\n\n /**\n * Message shown when camera can be enumerated but access is blocked by the system, for safari browsers\n */\n callCameraAccessDeniedSafari: string;\n\n /**\n * Message shown when local video fails to start because camera is already in use by\n * another applciation.\n */\n callCameraAlreadyInUse: string;\n\n /**\n * Message shown when local video is stopped by the system (not by local or remote participants)\n */\n callVideoStoppedBySystem: string;\n\n /**\n * Message shown when local video was recovered by the system (not by the local participant)\n */\n callVideoRecoveredBySystem: string;\n\n /**\n * Mac OS specific message shown when system denies access to camera.\n */\n callMacOsCameraAccessDenied: string;\n\n /**\n * Mac OS specific message shown when system denies sharing local screen on a call.\n */\n callMacOsScreenShareAccessDenied: string;\n /**\n * Dimiss errorbar button aria label read by screen reader accessibility tools\n */\n dismissButtonAriaLabel?: string;\n\n /**\n * An error message when joining a call fails.\n */\n failedToJoinCallGeneric?: string;\n\n /**\n * An error message when joining a call fails specifically due to an invalid meeting link.\n */\n failedToJoinCallInvalidMeetingLink?: string;\n /**\n * Generic message for when screen sharing fails\n */\n startScreenSharingGeneric?: string;\n /**\n * Error bar string letting you know remote participants see a frozen stream for you.\n */\n cameraFrozenForRemoteParticipants?: string;\n}\n\n/**\n * All errors that can be shown in the {@link ErrorBar}.\n *\n * @public\n */\nexport type ErrorType = keyof ErrorBarStrings;\n\n/**\n * Active error messages to be shown via {@link ErrorBar}.\n *\n * @public\n */\nexport interface ActiveErrorMessage {\n /**\n * Type of error that is active.\n */\n type: ErrorType;\n /**\n * The latest timestamp when this error was observed.\n *\n * When available, this is used to track errors that have already been seen and dismissed\n * by the user.\n */\n timestamp?: Date;\n}\n\n/**\n * A component to show error messages on the UI.\n * All strings that can be shown are accepted as the {@link ErrorBarProps.strings} so that they can be localized.\n * Active errors are selected by {@link ErrorBarProps.activeErrorMessages}.\n *\n * This component internally tracks dismissed by the user.\n * * Errors that have an associated timestamp: The error is shown on the UI again if it occurs after being dismissed.\n * * Errors that do not have a timestamp: The error is dismissed until it disappears from the props.\n * If the error recurs, it is shown in the UI.\n *\n * Uses {@link @fluentui/react#MessageBar} UI element.\n *\n * @public\n */\nexport const ErrorBar = (props: ErrorBarProps): JSX.Element => {\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n\n // Timestamp for when this comopnent is first mounted.\n // Never updated through the lifecycle of this component.\n const mountTimestamp = useRef(new Date(Date.now()));\n\n const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(\n () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)),\n [props.activeErrorMessages, dismissedErrors]\n );\n\n const toShow = errorsToShow(\n props.activeErrorMessages,\n dismissedErrors,\n props.ignorePremountErrors ? mountTimestamp.current : undefined\n );\n\n return (\n <Stack data-ui-id=\"error-bar-stack\">\n {toShow.map((error) => (\n <MessageBar\n {...props}\n styles={{\n innerText: {\n alignSelf: 'center'\n },\n icon: {\n height: 0\n },\n content: {\n lineHeight: 'inherit'\n },\n dismissal: {\n height: 0,\n paddingTop: '0.8rem'\n }\n }}\n key={error.type}\n messageBarType={messageBarType(error.type)}\n messageBarIconProps={messageBarIconProps(error.type)}\n onDismiss={() => setDismissedErrors(dismissError(dismissedErrors, error))}\n dismissButtonAriaLabel={strings.dismissButtonAriaLabel}\n dismissIconProps={{ iconName: 'ErrorBarClear' }}\n >\n {strings[error.type]}\n </MessageBar>\n ))}\n </Stack>\n );\n};\n"]}
@@ -27,6 +27,10 @@ export interface HorizontalGalleryProps {
27
27
  * @defaultValue 5
28
28
  */
29
29
  childrenPerPage?: number;
30
+ /**
31
+ * helper function to choose which tiles to give video to.
32
+ */
33
+ onFetchTilesToRender?: (indexes: number[]) => void;
30
34
  }
31
35
  /**
32
36
  * Renders a horizontal gallery that parents children horizontally. Handles pagination based on the childrenPerPage prop.
@@ -1,10 +1,11 @@
1
1
  // Copyright (c) Microsoft Corporation.
2
2
  // Licensed under the MIT license.
3
3
  import { DefaultButton, Icon, Stack, mergeStyles } from '@fluentui/react';
4
- import React, { useMemo, useState } from 'react';
4
+ import React, { useEffect, useMemo, useState } from 'react';
5
5
  import { useTheme } from '../theming';
6
6
  import { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';
7
7
  import { useIdentifiers } from '../identifiers';
8
+ import { bucketize } from './utils/overFlowGalleriesUtils';
8
9
  /**
9
10
  * {@link HorizontalGallery} default children per page
10
11
  */
@@ -15,42 +16,46 @@ const DEFAULT_CHILDREN_PER_PAGE = 5;
15
16
  * @returns
16
17
  */
17
18
  export const HorizontalGallery = (props) => {
18
- var _a, _b;
19
- const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles } = props;
19
+ var _a;
20
+ const { children, childrenPerPage = DEFAULT_CHILDREN_PER_PAGE, styles, onFetchTilesToRender } = props;
20
21
  const ids = useIdentifiers();
21
22
  const [page, setPage] = useState(0);
22
23
  const numberOfChildren = React.Children.count(children);
23
24
  const lastPage = Math.ceil(numberOfChildren / childrenPerPage) - 1;
24
- const paginatedChildren = useMemo(() => {
25
- return bucketize(React.Children.toArray(children), childrenPerPage);
26
- }, [children, childrenPerPage]);
27
- // If children per page is 0 or less return empty element
28
- if (childrenPerPage <= 0) {
29
- return React.createElement(React.Fragment, null);
30
- }
25
+ const indexesArray = useMemo(() => {
26
+ return bucketize([...Array(numberOfChildren).keys()], childrenPerPage);
27
+ }, [numberOfChildren, childrenPerPage]);
28
+ useEffect(() => {
29
+ if (onFetchTilesToRender && indexesArray) {
30
+ onFetchTilesToRender(indexesArray[page]);
31
+ }
32
+ }, [indexesArray, onFetchTilesToRender, page]);
31
33
  const firstIndexOfCurrentPage = page * childrenPerPage;
32
34
  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
33
- const childrenOnCurrentPage = paginatedChildren[clippedPage];
35
+ const childrenOnCurrentPage = useMemo(() => {
36
+ return indexesArray[clippedPage].map((index) => {
37
+ return React.Children.toArray(children)[index];
38
+ });
39
+ }, [indexesArray, clippedPage, children]);
34
40
  const showButtons = numberOfChildren > childrenPerPage;
35
41
  const disablePreviousButton = page === 0;
36
42
  const disableNextButton = page === lastPage;
43
+ const childrenStyles = useMemo(() => {
44
+ return { root: styles === null || styles === void 0 ? void 0 : styles.children };
45
+ }, [styles === null || styles === void 0 ? void 0 : styles.children]);
46
+ // If children per page is 0 or less return empty element
47
+ if (childrenPerPage <= 0) {
48
+ return React.createElement(React.Fragment, null);
49
+ }
37
50
  return (React.createElement(Stack, { horizontal: true, className: mergeStyles(rootStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.root) },
38
- showButtons && (React.createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.horizontalGalleryLeftNavButton })),
39
- React.createElement(Stack, { horizontal: true, className: mergeStyles(childrenContainerStyle, { '> *': (_b = props.styles) === null || _b === void 0 ? void 0 : _b.children }) }, childrenOnCurrentPage),
40
- showButtons && (React.createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.horizontalGalleryRightNavButton }))));
51
+ showButtons && (React.createElement(HorizontalGalleryNavigationButton, { key: "previous-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryLeftButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.previousButton, onClick: () => setPage(Math.max(0, Math.min(lastPage, page - 1))), disabled: disablePreviousButton, identifier: ids.overflowGalleryLeftNavButton })),
52
+ React.createElement(Stack, { horizontal: true, className: mergeStyles(childrenContainerStyle) }, childrenOnCurrentPage.map((child, i) => {
53
+ return (React.createElement(Stack.Item, { styles: childrenStyles, key: i, "data-ui-id": ids.horizontalGalleryVideoTile }, child));
54
+ })),
55
+ showButtons && (React.createElement(HorizontalGalleryNavigationButton, { key: "next-nav-button", icon: React.createElement(Icon, { iconName: "HorizontalGalleryRightButton" }), styles: styles === null || styles === void 0 ? void 0 : styles.nextButton, onClick: () => setPage(Math.min(lastPage, page + 1)), disabled: disableNextButton, identifier: ids.overflowGalleryRightNavButton }))));
41
56
  };
42
57
  const HorizontalGalleryNavigationButton = (props) => {
43
58
  const theme = useTheme();
44
59
  return (React.createElement(DefaultButton, { className: mergeStyles(leftRightButtonStyles(theme), props.styles), onClick: props.onClick, disabled: props.disabled, "data-ui-id": props.identifier }, props.icon));
45
60
  };
46
- function bucketize(arr, bucketSize) {
47
- const bucketArray = [];
48
- if (bucketSize <= 0) {
49
- return bucketArray;
50
- }
51
- for (let i = 0; i < arr.length; i += bucketSize) {
52
- bucketArray.push(arr.slice(i, i + bucketSize));
53
- }
54
- return bucketArray;
55
- }
56
61
  //# sourceMappingURL=HorizontalGallery.js.map
@@ -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, { useMemo, useState } from 'react';\nimport { useTheme } from '../theming';\nimport { BaseCustomStyles } from '../types';\nimport { rootStyle, childrenContainerStyle, leftRightButtonStyles } from './styles/HorizontalGallery.styles';\nimport { useIdentifiers } from '../identifiers';\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\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 } = 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 paginatedChildren: React.ReactNode[][] = useMemo(() => {\n return bucketize(React.Children.toArray(children), childrenPerPage);\n }, [children, childrenPerPage]);\n\n // If children per page is 0 or less return empty element\n if (childrenPerPage <= 0) {\n return <></>;\n }\n\n const firstIndexOfCurrentPage = page * childrenPerPage;\n const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;\n const childrenOnCurrentPage = paginatedChildren[clippedPage];\n\n const showButtons = numberOfChildren > childrenPerPage;\n const disablePreviousButton = page === 0;\n const disableNextButton = page === lastPage;\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.horizontalGalleryLeftNavButton}\n />\n )}\n <Stack horizontal className={mergeStyles(childrenContainerStyle, { '> *': props.styles?.children })}>\n {childrenOnCurrentPage}\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.horizontalGalleryRightNavButton}\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\nfunction bucketize<T>(arr: T[], bucketSize: number): T[][] {\n const bucketArray: T[][] = [];\n\n if (bucketSize <= 0) {\n return bucketArray;\n }\n\n for (let i = 0; i < arr.length; i += bucketSize) {\n bucketArray.push(arr.slice(i, i + bucketSize));\n }\n\n return bucketArray;\n}\n"]}
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 return indexesArray[clippedPage].map((index) => {\n return React.Children.toArray(children)[index];\n });\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"]}
@@ -234,10 +234,10 @@ export declare type MessageThreadProps = {
234
234
  /**
235
235
  * Optional callback to send a message.
236
236
  *
237
- * @param messageId - message id from chatClient
237
+ * @param content - message body to send
238
238
  *
239
239
  */
240
- onSendMessage?: (messageId: string) => Promise<void>;
240
+ onSendMessage?: (content: string) => Promise<void>;
241
241
  /**
242
242
  /**
243
243
  * Disable editing messages.
@@ -109,7 +109,7 @@ const DefaultSystemMessage = (props) => {
109
109
  }
110
110
  return React.createElement(React.Fragment, null);
111
111
  };
112
- const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, disableEditing) => {
112
+ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate, showMessageStatus, onRenderAvatar, shouldOverlapAvatarAndMessage, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme, _attached, statusToRender, participantCount, readCount, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, disableEditing) => {
113
113
  var _a, _b, _c, _d, _e, _f, _g;
114
114
  const messageProps = {
115
115
  message,
@@ -125,7 +125,7 @@ const memoizeAllMessages = memoizeFnAll((_messageKey, message, showMessageDate,
125
125
  const myChatMessageStyle = message.status === 'failed'
126
126
  ? (_b = (_a = styles === null || styles === void 0 ? void 0 : styles.failedMyChatMessageContainer) !== null && _a !== void 0 ? _a : styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _b !== void 0 ? _b : FailedMyChatMessageContainer
127
127
  : (_c = styles === null || styles === void 0 ? void 0 : styles.myChatMessageContainer) !== null && _c !== void 0 ? _c : defaultMyChatMessageContainer;
128
- const chatMessageStyle = (_d = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) !== null && _d !== void 0 ? _d : defaultChatMessageContainer;
128
+ const chatMessageStyle = (_d = styles === null || styles === void 0 ? void 0 : styles.chatMessageContainer) !== null && _d !== void 0 ? _d : defaultChatMessageContainer(theme);
129
129
  messageProps.messageContainerStyle = message.mine ? myChatMessageStyle : chatMessageStyle;
130
130
  const chatMessageComponent = onRenderMessage === undefined
131
131
  ? defaultChatMessageRenderer(messageProps)
@@ -215,6 +215,13 @@ export const MessageThread = (props) => {
215
215
  // readCount and participantCount will only need to be updated on-fly when user hover on an indicator
216
216
  const [readCountForHoveredIndicator, setReadCountForHoveredIndicator] = useState(undefined);
217
217
  const isAllChatMessagesLoadedRef = useRef(false);
218
+ // isAllChatMessagesLoadedRef needs to be updated every time when a new adapter is set in order to display correct data
219
+ // onLoadPreviousChatMessages is updated when a new adapter is set
220
+ useEffect(() => {
221
+ if (onLoadPreviousChatMessages) {
222
+ isAllChatMessagesLoadedRef.current = false;
223
+ }
224
+ }, [onLoadPreviousChatMessages]);
218
225
  const previousTopRef = useRef(-1);
219
226
  const previousHeightRef = useRef(-1);
220
227
  const messageIdSeenByMeRef = useRef('');
@@ -297,14 +304,19 @@ export const MessageThread = (props) => {
297
304
  if (!isLoadingChatMessagesRef.current) {
298
305
  if (onLoadPreviousChatMessages) {
299
306
  isLoadingChatMessagesRef.current = true;
300
- // Fetch message until scrollTop reach the threshold for fetching new message
301
- while (!isAllChatMessagesLoadedRef.current &&
302
- chatScrollDivRef.current &&
303
- chatScrollDivRef.current.scrollTop <= 500) {
304
- isAllChatMessagesLoadedRef.current = yield onLoadPreviousChatMessages(numberOfChatMessagesToReload);
305
- yield delay(200);
307
+ try {
308
+ // Fetch message until scrollTop reach the threshold for fetching new message
309
+ while (!isAllChatMessagesLoadedRef.current &&
310
+ chatScrollDivRef.current &&
311
+ chatScrollDivRef.current.scrollTop <= 500) {
312
+ isAllChatMessagesLoadedRef.current = yield onLoadPreviousChatMessages(numberOfChatMessagesToReload);
313
+ yield delay(200);
314
+ }
315
+ }
316
+ finally {
317
+ // Set isLoadingChatMessagesRef to false after messages are fetched
318
+ isLoadingChatMessagesRef.current = false;
306
319
  }
307
- isLoadingChatMessagesRef.current = false;
308
320
  }
309
321
  }
310
322
  }), [numberOfChatMessagesToReload, onLoadPreviousChatMessages]);
@@ -440,6 +452,7 @@ export const MessageThread = (props) => {
440
452
  // -1 because participant count does not include myself
441
453
  remoteParticipantsCount: participantCount ? participantCount - 1 : 0 }));
442
454
  }, []);
455
+ const theme = useTheme();
443
456
  const messagesToDisplay = useMemo(() => memoizeAllMessages((memoizedMessageFn) => {
444
457
  return messages.map((message, index) => {
445
458
  let key = message.messageId;
@@ -468,7 +481,7 @@ export const MessageThread = (props) => {
468
481
  statusToRender = 'failed';
469
482
  }
470
483
  }
471
- return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings,
484
+ return memoizedMessageFn(key !== null && key !== void 0 ? key : 'id_' + index, message, showMessageDate, showMessageStatus, onRenderAvatar, isNarrow, styles, onRenderMessageStatus, defaultStatusRenderer, defaultChatMessageRenderer, strings, theme,
472
485
  // Temporary solution to make sure we re-render if attach attribute is changed.
473
486
  // The proper fix should be in selector.
474
487
  message.messageType === 'chat' ? message.attached : undefined, statusToRender, participantCount, readCountForHoveredIndicator, onRenderMessage, onUpdateMessage, onDeleteMessage, onSendMessage, props.disableEditing);
@@ -484,6 +497,7 @@ export const MessageThread = (props) => {
484
497
  defaultStatusRenderer,
485
498
  defaultChatMessageRenderer,
486
499
  strings,
500
+ theme,
487
501
  participantCount,
488
502
  readCountForHoveredIndicator,
489
503
  onRenderMessage,
@@ -495,7 +509,6 @@ export const MessageThread = (props) => {
495
509
  lastDeliveredChatMessage,
496
510
  props.disableEditing
497
511
  ]);
498
- const theme = useTheme();
499
512
  const chatBody = useMemo(() => {
500
513
  var _a;
501
514
  return (React.createElement(LiveAnnouncer, null,