@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.
- package/CHANGELOG.beta.md +76 -1
- package/CHANGELOG.json +621 -0
- package/dist/communication-react.d.ts +217 -7
- package/dist/dist-cjs/communication-react/index.js +2207 -1184
- package/dist/dist-cjs/communication-react/index.js.map +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/errorBarSelector.js +1 -1
- package/dist/dist-esm/calling-component-bindings/src/errorBarSelector.js.map +1 -1
- package/dist/dist-esm/calling-component-bindings/src/handlers/createCommonHandlers.d.ts +4 -0
- package/dist/dist-esm/calling-component-bindings/src/handlers/createCommonHandlers.js +37 -1
- package/dist/dist-esm/calling-component-bindings/src/handlers/createCommonHandlers.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/CallClientState.d.ts +22 -1
- package/dist/dist-esm/calling-stateful-client/src/CallClientState.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/CallContext.d.ts +14 -0
- package/dist/dist-esm/calling-stateful-client/src/CallContext.js +44 -0
- package/dist/dist-esm/calling-stateful-client/src/CallContext.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.d.ts +1 -0
- package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.js +21 -0
- package/dist/dist-esm/calling-stateful-client/src/CallSubscriber.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/Converter.js +1 -0
- package/dist/dist-esm/calling-stateful-client/src/Converter.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/DeviceManagerDeclarative.d.ts +13 -1
- package/dist/dist-esm/calling-stateful-client/src/DeviceManagerDeclarative.js +8 -1
- package/dist/dist-esm/calling-stateful-client/src/DeviceManagerDeclarative.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/InternalCallContext.d.ts +4 -0
- package/dist/dist-esm/calling-stateful-client/src/InternalCallContext.js +28 -0
- package/dist/dist-esm/calling-stateful-client/src/InternalCallContext.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/LocalVideoStreamVideoEffectsSubscriber.d.ts +29 -0
- package/dist/dist-esm/calling-stateful-client/src/LocalVideoStreamVideoEffectsSubscriber.js +54 -0
- package/dist/dist-esm/calling-stateful-client/src/LocalVideoStreamVideoEffectsSubscriber.js.map +1 -0
- package/dist/dist-esm/calling-stateful-client/src/Logger.d.ts +16 -29
- package/dist/dist-esm/calling-stateful-client/src/Logger.js +16 -29
- package/dist/dist-esm/calling-stateful-client/src/Logger.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/StatefulCallClient.js +1 -1
- package/dist/dist-esm/calling-stateful-client/src/StatefulCallClient.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/StreamUtils.js +137 -370
- package/dist/dist-esm/calling-stateful-client/src/StreamUtils.js.map +1 -1
- package/dist/dist-esm/calling-stateful-client/src/StreamUtilsLogging.d.ts +17 -0
- package/dist/dist-esm/calling-stateful-client/src/StreamUtilsLogging.js +198 -0
- package/dist/dist-esm/calling-stateful-client/src/StreamUtilsLogging.js.map +1 -0
- package/dist/dist-esm/calling-stateful-client/src/index-public.d.ts +1 -0
- package/dist/dist-esm/calling-stateful-client/src/index-public.js.map +1 -1
- package/dist/dist-esm/chat-component-bindings/src/messageThreadSelector.js +1 -1
- package/dist/dist-esm/chat-component-bindings/src/messageThreadSelector.js.map +1 -1
- package/dist/dist-esm/chat-stateful-client/src/EventSubscriber.js +10 -2
- package/dist/dist-esm/chat-stateful-client/src/EventSubscriber.js.map +1 -1
- package/dist/dist-esm/communication-react/src/index.d.ts +2 -0
- package/dist/dist-esm/communication-react/src/index.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/CameraButton.d.ts +16 -0
- package/dist/dist-esm/react-components/src/components/CameraButton.js +38 -1
- package/dist/dist-esm/react-components/src/components/CameraButton.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/CaptionsBanner.d.ts +30 -0
- package/dist/dist-esm/react-components/src/components/CaptionsBanner.js +47 -0
- package/dist/dist-esm/react-components/src/components/CaptionsBanner.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.d.ts +6 -1
- package/dist/dist-esm/react-components/src/components/ChatMessage/ChatMessageComponent.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ControlBarButton.js +1 -1
- package/dist/dist-esm/react-components/src/components/ControlBarButton.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/DevicesButton.d.ts +1 -1
- package/dist/dist-esm/react-components/src/components/DevicesButton.js +79 -55
- package/dist/dist-esm/react-components/src/components/DevicesButton.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ErrorBar.d.ts +4 -0
- package/dist/dist-esm/react-components/src/components/ErrorBar.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/HorizontalGallery.d.ts +4 -0
- package/dist/dist-esm/react-components/src/components/HorizontalGallery.js +29 -24
- package/dist/dist-esm/react-components/src/components/HorizontalGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/MessageThread.d.ts +2 -2
- package/dist/dist-esm/react-components/src/components/MessageThread.js +24 -11
- package/dist/dist-esm/react-components/src/components/MessageThread.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/MicrophoneButton.d.ts +12 -0
- package/dist/dist-esm/react-components/src/components/MicrophoneButton.js +29 -1
- package/dist/dist-esm/react-components/src/components/MicrophoneButton.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ParticipantItem.js +1 -1
- package/dist/dist-esm/react-components/src/components/ParticipantItem.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js +1 -1
- package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ResponsiveHorizontalGallery.d.ts +4 -2
- package/dist/dist-esm/react-components/src/components/ResponsiveHorizontalGallery.js +6 -42
- package/dist/dist-esm/react-components/src/components/ResponsiveHorizontalGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ResponsiveVerticalGallery.d.ts +35 -0
- package/dist/dist-esm/react-components/src/components/ResponsiveVerticalGallery.js +32 -0
- package/dist/dist-esm/react-components/src/components/ResponsiveVerticalGallery.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/SendBox.js +5 -2
- package/dist/dist-esm/react-components/src/components/SendBox.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VerticalGallery.d.ts +67 -0
- package/dist/dist-esm/react-components/src/components/VerticalGallery.js +113 -0
- package/dist/dist-esm/react-components/src/components/VerticalGallery.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/VideoEffects/PresetVideoEffectsItems.d.ts +21 -0
- package/dist/dist-esm/react-components/src/components/VideoEffects/PresetVideoEffectsItems.js +65 -0
- package/dist/dist-esm/react-components/src/components/VideoEffects/PresetVideoEffectsItems.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.d.ts +75 -0
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js +44 -0
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.d.ts +88 -0
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js +80 -0
- package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.d.ts +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js +55 -19
- package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.d.ts +10 -3
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.js +11 -9
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideo.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.d.ts +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js +81 -24
- package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/Layout.d.ts +11 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/Layout.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/OverflowGallery.d.ts +21 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/OverflowGallery.js +63 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/OverflowGallery.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.d.ts +2 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.js +8 -2
- package/dist/dist-esm/react-components/src/components/VideoGallery/ScrollableHorizontalGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.d.ts +32 -7
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js +28 -12
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.js +2 -2
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/ScrollableHorizontalGallery.style.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.d.ts +4 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.js +8 -7
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveHorizontalGallery.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.d.ts +64 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.js +79 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.d.ts +25 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.js +94 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/utils/OverflowGalleryUtils.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.d.ts +4 -4
- package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js +58 -49
- package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery.d.ts +25 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery.js +32 -4
- package/dist/dist-esm/react-components/src/components/VideoGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoTile.js +9 -12
- package/dist/dist-esm/react-components/src/components/VideoTile.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/index.d.ts +8 -0
- package/dist/dist-esm/react-components/src/components/index.js +4 -0
- package/dist/dist-esm/react-components/src/components/index.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/CaptionsBanner.style.d.ts +13 -0
- package/dist/dist-esm/react-components/src/components/styles/CaptionsBanner.style.js +35 -0
- package/dist/dist-esm/react-components/src/components/styles/CaptionsBanner.style.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/styles/HorizontalGallery.styles.js +1 -0
- package/dist/dist-esm/react-components/src/components/styles/HorizontalGallery.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.d.ts +2 -2
- package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.js +30 -2
- package/dist/dist-esm/react-components/src/components/styles/MessageThread.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/VerticalGallery.styles.d.ts +32 -0
- package/dist/dist-esm/react-components/src/components/styles/VerticalGallery.styles.js +66 -0
- package/dist/dist-esm/react-components/src/components/styles/VerticalGallery.styles.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/utils/overFlowGalleriesUtils.d.ts +11 -0
- package/dist/dist-esm/react-components/src/components/utils/overFlowGalleriesUtils.js +22 -0
- package/dist/dist-esm/react-components/src/components/utils/overFlowGalleriesUtils.js.map +1 -0
- package/dist/dist-esm/react-components/src/components/utils/responsive.d.ts +6 -0
- package/dist/dist-esm/react-components/src/components/utils/responsive.js +7 -0
- package/dist/dist-esm/react-components/src/components/utils/responsive.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/utils.d.ts +5 -0
- package/dist/dist-esm/react-components/src/components/utils.js +20 -0
- package/dist/dist-esm/react-components/src/components/utils.js.map +1 -1
- package/dist/dist-esm/react-components/src/gallery/dominantSpeaker.js +6 -14
- package/dist/dist-esm/react-components/src/gallery/dominantSpeaker.js.map +1 -1
- package/dist/dist-esm/react-components/src/identifiers/IdentifierProvider.d.ts +10 -4
- package/dist/dist-esm/react-components/src/identifiers/IdentifierProvider.js +7 -2
- package/dist/dist-esm/react-components/src/identifiers/IdentifierProvider.js.map +1 -1
- package/dist/dist-esm/react-components/src/localization/LocalizationProvider.d.ts +5 -0
- package/dist/dist-esm/react-components/src/localization/LocalizationProvider.js.map +1 -1
- package/dist/dist-esm/react-components/src/localization/locales/de-DE/strings.json +14 -3
- package/dist/dist-esm/react-components/src/localization/locales/en-GB/strings.json +14 -3
- package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json +14 -3
- package/dist/dist-esm/react-components/src/localization/locales/es-ES/strings.json +14 -3
- package/dist/dist-esm/react-components/src/localization/locales/fr-FR/strings.json +14 -3
- package/dist/dist-esm/react-components/src/localization/locales/it-IT/strings.json +14 -3
- package/dist/dist-esm/react-components/src/localization/locales/ja-JP/strings.json +14 -3
- package/dist/dist-esm/react-components/src/localization/locales/ko-KR/strings.json +14 -3
- package/dist/dist-esm/react-components/src/localization/locales/nl-NL/strings.json +14 -3
- package/dist/dist-esm/react-components/src/localization/locales/pt-BR/strings.json +14 -3
- package/dist/dist-esm/react-components/src/localization/locales/ru-RU/strings.json +14 -3
- package/dist/dist-esm/react-components/src/localization/locales/tr-TR/strings.json +14 -3
- package/dist/dist-esm/react-components/src/localization/locales/zh-CN/strings.json +14 -3
- package/dist/dist-esm/react-components/src/localization/locales/zh-TW/strings.json +14 -3
- package/dist/dist-esm/react-components/src/theming/icons.d.ts +7 -0
- package/dist/dist-esm/react-components/src/theming/icons.js +19 -7
- package/dist/dist-esm/react-components/src/theming/icons.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.d.ts +4 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js +27 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapter.d.ts +42 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js +8 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js +21 -3
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/NetworkReconnectTile.js +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/NetworkReconnectTile.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.d.ts +5 -4
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.js +3 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Custom.d.ts +0 -5
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Custom.js +1 -31
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Custom.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useHandlers.js +12 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useHandlers.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/index.d.ts +1 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/index.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/MediaGalleryUtils.d.ts +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/MediaGalleryUtils.js +3 -3
- package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/MediaGalleryUtils.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js +11 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatControlBar.d.ts +1 -0
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatControlBar.js +12 -8
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatControlBar.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CustomButton.d.ts +16 -3
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CustomButton.js +49 -43
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CustomButton.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.d.ts +4 -0
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js +24 -0
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.d.ts +19 -0
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.d.ts +4 -0
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.js +18 -0
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/components/DesktopMoreButton.d.ts +2 -0
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/components/DesktopMoreButton.js +47 -26
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/components/DesktopMoreButton.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/components/MoreDrawer.js +4 -4
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/components/MoreDrawer.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/styles/CallWithChatCompositeStyles.d.ts +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/styles/CallWithChatCompositeStyles.js +5 -3
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/styles/CallWithChatCompositeStyles.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js +16 -1
- package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/ParticipantContainer.js +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/ParticipantContainer.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.d.ts +11 -0
- package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js +19 -0
- package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js.map +1 -0
- package/dist/dist-esm/react-composites/src/composites/common/icons.d.ts +7 -0
- package/dist/dist-esm/react-composites/src/composites/common/icons.js +4 -4
- package/dist/dist-esm/react-composites/src/composites/common/icons.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/styles/Composite.styles.d.ts +7 -0
- package/dist/dist-esm/react-composites/src/composites/common/styles/Composite.styles.js +9 -0
- package/dist/dist-esm/react-composites/src/composites/common/styles/Composite.styles.js.map +1 -0
- package/package.json +12 -12
- package/dist/dist-esm/react-components/src/components/VideoGallery/VideoGalleryResponsiveHorizontalGallery.d.ts +0 -14
- package/dist/dist-esm/react-components/src/components/VideoGallery/VideoGalleryResponsiveHorizontalGallery.js +0 -19
- 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: '
|
38
|
-
title: strings.cameraMenuTooltip,
|
37
|
+
key: 'cameras',
|
39
38
|
itemType: ContextualMenuItemType.Section,
|
40
39
|
sectionProps: {
|
41
40
|
title: strings.cameraMenuTitle,
|
42
|
-
items:
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
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:
|
70
|
-
title: title,
|
77
|
+
key: 'microphones',
|
71
78
|
itemType: ContextualMenuItemType.Section,
|
72
79
|
sectionProps: {
|
73
|
-
title:
|
74
|
-
items:
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
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: '
|
96
|
-
title: strings.speakerMenuTooltip,
|
110
|
+
key: 'speakers',
|
97
111
|
itemType: ContextualMenuItemType.Section,
|
98
112
|
sectionProps: {
|
99
113
|
title: strings.speakerMenuTitle,
|
100
|
-
items:
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
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":"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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 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
|
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
|
25
|
-
return bucketize(
|
26
|
-
}, [
|
27
|
-
|
28
|
-
|
29
|
-
|
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 =
|
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.
|
39
|
-
React.createElement(Stack, { horizontal: true, className: mergeStyles(childrenContainerStyle
|
40
|
-
|
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":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAU,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAClF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
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
|
237
|
+
* @param content - message body to send
|
238
238
|
*
|
239
239
|
*/
|
240
|
-
onSendMessage?: (
|
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
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
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,
|