@azure/communication-react 1.7.1-alpha-202308290013 → 1.7.1-alpha-202308300012

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 (62) hide show
  1. package/dist/communication-react.d.ts +83 -9
  2. package/dist/dist-cjs/communication-react/index.js +287 -77
  3. package/dist/dist-cjs/communication-react/index.js.map +1 -1
  4. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
  5. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
  6. package/dist/dist-esm/calling-component-bindings/src/baseSelectors.js +1 -1
  7. package/dist/dist-esm/calling-component-bindings/src/baseSelectors.js.map +1 -1
  8. package/dist/dist-esm/calling-stateful-client/src/CallClientState.d.ts +6 -2
  9. package/dist/dist-esm/calling-stateful-client/src/CallClientState.js.map +1 -1
  10. package/dist/dist-esm/calling-stateful-client/src/CallContext.d.ts +2 -2
  11. package/dist/dist-esm/calling-stateful-client/src/CallContext.js +2 -2
  12. package/dist/dist-esm/calling-stateful-client/src/CallContext.js.map +1 -1
  13. package/dist/dist-esm/calling-stateful-client/src/CapabilitiesSubscriber.js +2 -2
  14. package/dist/dist-esm/calling-stateful-client/src/CapabilitiesSubscriber.js.map +1 -1
  15. package/dist/dist-esm/calling-stateful-client/src/index-public.d.ts +1 -1
  16. package/dist/dist-esm/calling-stateful-client/src/index-public.js.map +1 -1
  17. package/dist/dist-esm/react-components/src/components/ImageGallery.js +6 -10
  18. package/dist/dist-esm/react-components/src/components/ImageGallery.js.map +1 -1
  19. package/dist/dist-esm/react-components/src/components/styles/ImageGallery.style.d.ts +9 -7
  20. package/dist/dist-esm/react-components/src/components/styles/ImageGallery.style.js +31 -37
  21. package/dist/dist-esm/react-components/src/components/styles/ImageGallery.style.js.map +1 -1
  22. package/dist/dist-esm/react-components/src/components/styles/MentionPopover.style.d.ts +0 -5
  23. package/dist/dist-esm/react-components/src/components/styles/MentionPopover.style.js +4 -7
  24. package/dist/dist-esm/react-components/src/components/styles/MentionPopover.style.js.map +1 -1
  25. package/dist/dist-esm/react-components/src/theming/themes.d.ts +22 -3
  26. package/dist/dist-esm/react-components/src/theming/themes.js +16 -0
  27. package/dist/dist-esm/react-components/src/theming/themes.js.map +1 -1
  28. package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js +23 -5
  29. package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js.map +1 -1
  30. package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.d.ts +5 -0
  31. package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.js.map +1 -1
  32. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.d.ts +2 -0
  33. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js +17 -6
  34. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js.map +1 -1
  35. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.d.ts +88 -0
  36. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.js +69 -0
  37. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.js.map +1 -0
  38. package/dist/dist-esm/react-composites/src/composites/CallComposite/index.d.ts +1 -0
  39. package/dist/dist-esm/react-composites/src/composites/CallComposite/index.js.map +1 -1
  40. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.d.ts +2 -0
  41. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js +3 -1
  42. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js.map +1 -1
  43. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.d.ts +2 -0
  44. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js.map +1 -1
  45. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/HoldPage.d.ts +2 -0
  46. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/HoldPage.js.map +1 -1
  47. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/LobbyPage.d.ts +2 -0
  48. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/LobbyPage.js.map +1 -1
  49. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/baseSelectors.d.ts +5 -0
  50. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/baseSelectors.js +9 -1
  51. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/baseSelectors.js.map +1 -1
  52. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/capabilitiesChangedInfoAndRoleSelector.d.ts +12 -0
  53. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/capabilitiesChangedInfoAndRoleSelector.js +14 -0
  54. package/dist/dist-esm/react-composites/src/composites/CallComposite/selectors/capabilitiesChangedInfoAndRoleSelector.js.map +1 -0
  55. package/dist/dist-esm/react-composites/src/composites/CallComposite/types/CapabilityChangedNotificationTracking.d.ts +9 -0
  56. package/dist/dist-esm/react-composites/src/composites/CallComposite/types/CapabilityChangedNotificationTracking.js +4 -0
  57. package/dist/dist-esm/react-composites/src/composites/CallComposite/types/CapabilityChangedNotificationTracking.js.map +1 -0
  58. package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/TrackCapabilityChangedNotifications.d.ts +33 -0
  59. package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/TrackCapabilityChangedNotifications.js +99 -0
  60. package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/TrackCapabilityChangedNotifications.js.map +1 -0
  61. package/dist/dist-esm/react-composites/src/composites/localization/locales/en-US/strings.json +15 -1
  62. package/package.json +8 -8
@@ -178,7 +178,7 @@ const _isValidIdentifier = (identifier) => {
178
178
  // Copyright (c) Microsoft Corporation.
179
179
  // Licensed under the MIT license.
180
180
  // GENERATED FILE. DO NOT EDIT MANUALLY.
181
- var telemetryVersion = '1.7.1-alpha-202308290013';
181
+ var telemetryVersion = '1.7.1-alpha-202308300012';
182
182
 
183
183
  // Copyright (c) Microsoft Corporation.
184
184
  /**
@@ -335,7 +335,7 @@ const getDeviceManager$1 = (state) => state.deviceManager;
335
335
  /**
336
336
  * @private
337
337
  */
338
- const getRole = (state, props) => {
338
+ const getRole$1 = (state, props) => {
339
339
  var _a;
340
340
  /* @conditional-compile-remove(rooms) */
341
341
  return (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.role;
@@ -344,7 +344,7 @@ const getRole = (state, props) => {
344
344
  /**
345
345
  * @private
346
346
  */
347
- const getCapabilites = (state, props) => { var _a, _b; return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.capabilities) === null || _b === void 0 ? void 0 : _b.capabilities; };
347
+ const getCapabilites = (state, props) => { var _a, _b; return (_b = (_a = state.calls[props.callId]) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities; };
348
348
  /**
349
349
  * @private
350
350
  */
@@ -567,7 +567,7 @@ const microphoneButtonSelector = reselect__namespace.createSelector([
567
567
  getIsMuted,
568
568
  getDeviceManager$1,
569
569
  /* @conditional-compile-remove(capabilities) */ getCapabilites,
570
- /* @conditional-compile-remove(capabilities) */ getRole
570
+ /* @conditional-compile-remove(capabilities) */ getRole$1
571
571
  ], (callExists, isMuted, deviceManager,
572
572
  /* @conditional-compile-remove(capabilities) */ capabilities,
573
573
  /* @conditional-compile-remove(capabilities) */ role) => {
@@ -593,7 +593,7 @@ const cameraButtonSelector = reselect__namespace.createSelector([
593
593
  getLocalVideoStreams$1,
594
594
  getDeviceManager$1,
595
595
  /* @conditional-compile-remove(capabilities) */ getCapabilites,
596
- /* @conditional-compile-remove(capabilities) */ getRole
596
+ /* @conditional-compile-remove(capabilities) */ getRole$1
597
597
  ], (localVideoStreams, deviceManager,
598
598
  /* @conditional-compile-remove(capabilities) */ capabilities,
599
599
  /* @conditional-compile-remove(capabilities) */ role) => {
@@ -635,7 +635,7 @@ const screenShareButtonSelector = reselect__namespace.createSelector([
635
635
  getIsScreenSharingOn,
636
636
  /* @conditional-compile-remove(PSTN-calls) */ getCallState,
637
637
  /* @conditional-compile-remove(capabilities) */ getCapabilites,
638
- /* @conditional-compile-remove(capabilities) */ getRole
638
+ /* @conditional-compile-remove(capabilities) */ getRole$1
639
639
  ], (isScreenSharingOn,
640
640
  /* @conditional-compile-remove(PSTN-calls) */ callState,
641
641
  /* @conditional-compile-remove(capabilities) */ capabilities,
@@ -2028,11 +2028,11 @@ class CallContext$2 {
2028
2028
  });
2029
2029
  }
2030
2030
  /* @conditional-compile-remove(capabilities) */
2031
- setCapabilities(callId, capabilities) {
2031
+ setCapabilities(callId, capabilities, capabilitiesChangeInfo) {
2032
2032
  this.modifyState((draft) => {
2033
2033
  const call = draft.calls[this._callIdHistory.latestCallId(callId)];
2034
2034
  if (call) {
2035
- call.capabilities = { capabilities: capabilities };
2035
+ call.capabilitiesFeature = { capabilities, latestCapabilitiesChangeInfo: capabilitiesChangeInfo };
2036
2036
  }
2037
2037
  });
2038
2038
  }
@@ -3559,8 +3559,8 @@ class CapabilitiesSubscriber {
3559
3559
  this.unsubscribe = () => {
3560
3560
  this._capabilitiesFeature.off('capabilitiesChanged', this.capabilitiesChanged);
3561
3561
  };
3562
- this.capabilitiesChanged = () => {
3563
- this._context.setCapabilities(this._callIdRef.callId, this._capabilitiesFeature.capabilities);
3562
+ this.capabilitiesChanged = (data) => {
3563
+ this._context.setCapabilities(this._callIdRef.callId, this._capabilitiesFeature.capabilities, data);
3564
3564
  };
3565
3565
  this._callIdRef = callIdRef;
3566
3566
  this._context = context;
@@ -5960,6 +5960,14 @@ const lightTheme = {
5960
5960
  /* @conditional-compile-remove(raise-hand) */
5961
5961
  raiseHandGold: '#eaa300'
5962
5962
  },
5963
+ /* @conditional-compile-remove(image-gallery) */
5964
+ chatPalette: {
5965
+ modalOverlayBlack: '#000000',
5966
+ modalTitleWhite: '#ffffff',
5967
+ modalButtonBackground: '#1b1a19',
5968
+ modalButtonBackgroundHover: '#252423',
5969
+ modalButtonBackgroundActive: '#292827'
5970
+ },
5963
5971
  semanticColors: {
5964
5972
  errorText: '#a80000'
5965
5973
  }
@@ -6002,6 +6010,14 @@ const darkTheme = {
6002
6010
  /* @conditional-compile-remove(raise-hand) */
6003
6011
  raiseHandGold: '#eaa300'
6004
6012
  },
6013
+ /* @conditional-compile-remove(image-gallery) */
6014
+ chatPalette: {
6015
+ modalOverlayBlack: '#000000',
6016
+ modalTitleWhite: '#ffffff',
6017
+ modalButtonBackground: '#1b1a19',
6018
+ modalButtonBackgroundHover: '#252423',
6019
+ modalButtonBackgroundActive: '#292827'
6020
+ },
6005
6021
  semanticColors: {
6006
6022
  errorText: '#f1707b'
6007
6023
  }
@@ -7294,11 +7310,6 @@ const unEscapeHtmlCharacters = (text) => {
7294
7310
  };
7295
7311
 
7296
7312
  // Copyright (c) Microsoft Corporation.
7297
- /**
7298
- * @private
7299
- * z-index to ensure that chat container has lower z-index than mention popover
7300
- */
7301
- const CHAT_CONTAINER_ZINDEX$1 = 1;
7302
7313
  /**
7303
7314
  * @private
7304
7315
  */
@@ -7306,8 +7317,10 @@ const mentionPopoverContainerStyle = (theme) => react.mergeStyles({
7306
7317
  boxShadow: theme.effects.elevation16,
7307
7318
  background: theme.semanticColors.bodyBackground,
7308
7319
  overflow: 'visible',
7309
- // zIndex to set the mentionPopover above the chat container
7310
- zIndex: CHAT_CONTAINER_ZINDEX$1 + 1
7320
+ // zIndex to set the mentionPopover
7321
+ // Temporary set to a hardcoded high number to make sure it is on top of the other components
7322
+ // Will be replaced by a proper z-index solution after the Fluent 9 migration
7323
+ zIndex: 10000
7311
7324
  });
7312
7325
  /**
7313
7326
  * @private
@@ -8523,15 +8536,14 @@ const cancelIcon = { iconName: 'Cancel' };
8523
8536
  const downloadIcon = {
8524
8537
  iconName: 'Download'
8525
8538
  };
8539
+ /* @conditional-compile-remove(image-gallery) */
8526
8540
  /**
8527
8541
  * @private
8528
8542
  */
8529
- const overlayStyles = (theme, isDarkThemed) => {
8543
+ const overlayStyles = (theme) => {
8530
8544
  return {
8531
8545
  root: {
8532
- // The overlay background color should always be black in both light and dark theme.
8533
- // In dark theme, theme.palette.white is actually black.
8534
- background: isDarkThemed ? theme.palette.white : theme.palette.black,
8546
+ background: theme.chatPalette.modalOverlayBlack,
8535
8547
  opacity: '0.85'
8536
8548
  }
8537
8549
  };
@@ -8581,14 +8593,15 @@ const titleBarContainerStyle = {
8581
8593
  alignContent: 'center',
8582
8594
  alignItems: 'center'
8583
8595
  };
8596
+ /* @conditional-compile-remove(image-gallery) */
8584
8597
  /**
8585
8598
  * @private
8586
8599
  */
8587
- const titleStyle$2 = (theme, isDarkThemed) => {
8600
+ const titleStyle$2 = (theme) => {
8588
8601
  return {
8589
8602
  paddingLeft: '0.5rem',
8590
8603
  marginLeft: '0.5rem',
8591
- color: isDarkThemed ? undefined : theme.palette.white,
8604
+ color: theme.chatPalette.modalTitleWhite,
8592
8605
  fontFamily: 'inherit',
8593
8606
  fontSize: '0.875rem',
8594
8607
  fontStyle: 'normal',
@@ -8646,38 +8659,37 @@ const normalImageStyle = {
8646
8659
  maxHeight: '100%',
8647
8660
  maxWidth: '100%'
8648
8661
  };
8662
+ /* @conditional-compile-remove(image-gallery) */
8649
8663
  /**
8650
8664
  * @private
8651
8665
  */
8652
- const brokenImageStyle = (theme, isDarkThemed) => {
8666
+ const brokenImageStyle = (theme) => {
8653
8667
  return {
8654
- // The color should be white in dark theme.
8655
- // In dark theme, theme.palette.black is actually white.
8656
- color: isDarkThemed ? theme.palette.black : theme.palette.white
8668
+ color: theme.chatPalette.modalTitleWhite
8657
8669
  };
8658
8670
  };
8671
+ /* @conditional-compile-remove(image-gallery) */
8659
8672
  /**
8660
8673
  * @private
8661
8674
  */
8662
- const closeButtonStyles = (theme, isDarkThemed) => {
8675
+ const closeButtonStyles = (theme) => {
8663
8676
  return {
8664
- // The color should be white in dark theme.
8665
- // In dark theme, theme.palette.black is actually white.
8666
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
8677
+ color: theme.chatPalette.modalTitleWhite,
8667
8678
  ':hover': {
8668
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
8669
- backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
8679
+ color: theme.chatPalette.modalTitleWhite,
8680
+ backgroundColor: theme.chatPalette.modalButtonBackgroundHover
8670
8681
  },
8671
8682
  ':active': {
8672
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
8673
- backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
8683
+ color: theme.chatPalette.modalTitleWhite,
8684
+ backgroundColor: theme.chatPalette.modalButtonBackgroundActive
8674
8685
  }
8675
8686
  };
8676
8687
  };
8688
+ /* @conditional-compile-remove(image-gallery) */
8677
8689
  /**
8678
8690
  * @private
8679
8691
  */
8680
- const downloadButtonStyle = (theme, isDarkThemed) => {
8692
+ const downloadButtonStyle = (theme) => {
8681
8693
  return {
8682
8694
  margin: '0 0.5rem',
8683
8695
  height: '32px',
@@ -8686,43 +8698,38 @@ const downloadButtonStyle = (theme, isDarkThemed) => {
8686
8698
  fontWeight: 600,
8687
8699
  padding: '0.38rem 0.75rem',
8688
8700
  borderRadius: '4px',
8689
- backgroundColor: isDarkThemed ? theme.palette.neutralLighterAlt : theme.palette.neutralPrimary,
8690
- color: isDarkThemed ? undefined : theme.palette.white,
8701
+ backgroundColor: theme.chatPalette.modalButtonBackground,
8702
+ color: theme.chatPalette.modalTitleWhite,
8691
8703
  whiteSpace: 'nowrap',
8692
8704
  ':hover': {
8693
- // The color should be white in dark theme.
8694
- // In dark theme, theme.palette.black is actually white.
8695
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
8696
- backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
8705
+ color: theme.chatPalette.modalTitleWhite,
8706
+ backgroundColor: theme.chatPalette.modalButtonBackgroundHover
8697
8707
  },
8698
8708
  ':active': {
8699
- // The color should be white in dark theme.
8700
- // In dark theme, theme.palette.black is actually white.
8701
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
8702
- backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
8709
+ color: theme.chatPalette.modalTitleWhite,
8710
+ backgroundColor: theme.chatPalette.modalButtonBackgroundActive
8703
8711
  },
8704
8712
  '@media (max-width: 25rem)': {
8705
8713
  display: 'none'
8706
8714
  }
8707
8715
  };
8708
8716
  };
8717
+ /* @conditional-compile-remove(image-gallery) */
8709
8718
  /**
8710
8719
  * @private
8711
8720
  */
8712
- const smallDownloadButtonContainerStyle = (theme, isDarkThemed) => {
8721
+ const smallDownloadButtonContainerStyle = (theme) => {
8713
8722
  return {
8714
8723
  marginRight: '0.5rem',
8715
- // The color should be white in dark theme.
8716
- // In dark theme, theme.palette.black is actually white.
8717
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
8724
+ color: theme.chatPalette.modalTitleWhite,
8718
8725
  whiteSpace: 'nowrap',
8719
8726
  ':hover': {
8720
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
8721
- backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt
8727
+ color: theme.chatPalette.modalTitleWhite,
8728
+ backgroundColor: theme.chatPalette.modalButtonBackgroundHover
8722
8729
  },
8723
8730
  ':active': {
8724
- color: isDarkThemed ? theme.palette.black : theme.palette.white,
8725
- backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark
8731
+ color: theme.chatPalette.modalTitleWhite,
8732
+ backgroundColor: theme.chatPalette.modalButtonBackgroundActive
8726
8733
  },
8727
8734
  '@media (min-width: 25rem)': {
8728
8735
  display: 'none'
@@ -8740,13 +8747,11 @@ const smallDownloadButtonContainerStyle = (theme, isDarkThemed) => {
8740
8747
  const ImageGallery = (props) => {
8741
8748
  const { isOpen, images, onImageDownloadButtonClicked, onDismiss, onError, startIndex = 0 } = props;
8742
8749
  const theme = useTheme();
8743
- const isDarkTheme = isDarkThemed(theme);
8744
8750
  /* @conditional-compile-remove(image-gallery) */
8745
8751
  const localeStrings = useLocale$1().strings.imageGallery;
8746
8752
  const [isImageLoaded, setIsImageLoaded] = React.useState(true);
8747
- const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme, isDarkTheme);
8753
+ const imageStyle = isImageLoaded ? normalImageStyle : brokenImageStyle(theme);
8748
8754
  if (images.length <= startIndex) {
8749
- console.log('Unable to display Image Gallery due to startIndex is out of range.');
8750
8755
  return React__default['default'].createElement(React__default['default'].Fragment, null);
8751
8756
  }
8752
8757
  const image = images[startIndex];
@@ -8754,13 +8759,13 @@ const ImageGallery = (props) => {
8754
8759
  return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(headerStyle) },
8755
8760
  React__default['default'].createElement(react.Stack, { className: react.mergeStyles(titleBarContainerStyle) },
8756
8761
  image.titleIcon,
8757
- React__default['default'].createElement(react.Stack.Item, { className: react.mergeStyles(titleStyle$2(theme, isDarkTheme)), "aria-label": image.title }, image.title)),
8762
+ React__default['default'].createElement(react.Stack.Item, { className: react.mergeStyles(titleStyle$2(theme)), "aria-label": image.title }, image.title)),
8758
8763
  React__default['default'].createElement(react.Stack, { className: react.mergeStyles(controlBarContainerStyle) },
8759
- React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(downloadButtonStyle(theme, isDarkTheme)),
8764
+ React__default['default'].createElement(react.DefaultButton, { className: react.mergeStyles(downloadButtonStyle(theme)),
8760
8765
  /* @conditional-compile-remove(image-gallery) */
8761
8766
  text: localeStrings.downloadButtonLabel, onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), onRenderIcon: () => React__default['default'].createElement(react.Icon, { iconName: downloadIcon.iconName, className: react.mergeStyles(downloadIconStyle) }), "aria-live": 'polite', "aria-label": localeStrings.downloadButtonLabel }),
8762
- React__default['default'].createElement(react.IconButton, { iconProps: downloadIcon, className: react.mergeStyles(smallDownloadButtonContainerStyle(theme, isDarkTheme)), onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' }),
8763
- React__default['default'].createElement(react.IconButton, { iconProps: cancelIcon, className: react.mergeStyles(closeButtonStyles(theme, isDarkTheme)), onClick: onDismiss,
8767
+ React__default['default'].createElement(react.IconButton, { iconProps: downloadIcon, className: react.mergeStyles(smallDownloadButtonContainerStyle(theme)), onClick: () => onImageDownloadButtonClicked(image.imageUrl, image.saveAsName), "aria-label": localeStrings.downloadButtonLabel, "aria-live": 'polite' }),
8768
+ React__default['default'].createElement(react.IconButton, { iconProps: cancelIcon, className: react.mergeStyles(closeButtonStyles(theme)), onClick: onDismiss,
8764
8769
  /* @conditional-compile-remove(image-gallery) */
8765
8770
  ariaLabel: localeStrings.dismissButtonAriaLabel, "aria-live": 'polite' }))));
8766
8771
  };
@@ -8781,7 +8786,7 @@ const ImageGallery = (props) => {
8781
8786
  event.persist();
8782
8787
  } }))));
8783
8788
  };
8784
- return (React__default['default'].createElement(react.Modal, { titleAriaId: image.title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(theme, isDarkTheme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
8789
+ return (React__default['default'].createElement(react.Modal, { titleAriaId: image.title, isOpen: isOpen, onDismiss: onDismiss, overlay: { styles: Object.assign({}, overlayStyles(theme)) }, styles: { main: focusTrapZoneStyle, scrollableContent: scrollableContentStyle }, isDarkOverlay: true },
8785
8790
  renderHeaderBar(),
8786
8791
  renderBodyWithLightDismiss()));
8787
8792
  };
@@ -17827,7 +17832,7 @@ const videoGallerySelector = reselect.createSelector([
17827
17832
  /* @conditional-compile-remove(optimal-video-count) */
17828
17833
  getOptimalVideoCount,
17829
17834
  /* @conditional-compile-remove(rooms) */
17830
- getRole,
17835
+ getRole$1,
17831
17836
  /* @conditional-compile-remove(raise-hand) */
17832
17837
  getLocalParticipantRaisedHand$1
17833
17838
  ], (screenShareRemoteParticipantId, remoteParticipants, localVideoStreams, isMuted, isScreenSharingOn, displayName, identifier, dominantSpeakers,
@@ -17954,7 +17959,7 @@ const participantListSelector = reselect.createSelector([
17954
17959
  getIsScreenSharingOn,
17955
17960
  getIsMuted,
17956
17961
  /* @conditional-compile-remove(raise-hand) */ getLocalParticipantRaisedHand$1,
17957
- getRole,
17962
+ getRole$1,
17958
17963
  getParticipantCount
17959
17964
  ], (userId, displayName, remoteParticipants, isScreenSharingOn, isMuted,
17960
17965
  /* @conditional-compile-remove(raise-hand) */
@@ -20345,7 +20350,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
20345
20350
  */
20346
20351
  const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
20347
20352
 
20348
- var call$k={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"Captions Settings",captionsSettingsSpokenLanguageDropdownLabel:"Spoken language",captionsSettingsCaptionLanguageDropdownLabel:"Captions language",captionsSettingsSpokenLanguageDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsCaptionLanguageDropdownInfoText:"Captions will appear in this langugage.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",spokenLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionLanguageStrings:{ar:"Arabic",da:"Danish",de:"German",en:"English",es:"Spanish",fi:"Finnish","fr-ca":"French - Canada",fr:"French - France",hi:"Hindi",it:"Italian",ja:"Japanese",ko:"Korean",nb:"Norwegian (Bokmål)",nl:"Dutch",pl:"Polish",pt:"Portuguese - Brazil",ru:"Russian",sv:"Swedish","zh-Hans":"Chinese (Simplified)","zh-Hant":"Chinese (Traditional)",cs:"Czech","pt-pt":"Portuguese - Portugal",tr:"Turkish",vi:"Vietnamese",th:"Thai",he:"Hebrew",cy:"Welsh",uk:"Ukrainian",el:"Greek",hu:"Hungarian",ro:"Romanian",sk:"Slovak"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"Gallery options",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker layout",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic layout",moreButtonGalleryDefaultLayoutLabel:"Gallery layout",moreButtonGalleryFocusedContentLayoutLabel:"Focused content"};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",moreDrawerCaptionLanguageMenuTitle:"Caption language",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$k,chat:chat$k,callWithChat:callWithChat$k};
20353
+ var call$k={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"Captions Settings",captionsSettingsSpokenLanguageDropdownLabel:"Spoken language",captionsSettingsCaptionLanguageDropdownLabel:"Captions language",captionsSettingsSpokenLanguageDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsCaptionLanguageDropdownInfoText:"Captions will appear in this langugage.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",spokenLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionLanguageStrings:{ar:"Arabic",da:"Danish",de:"German",en:"English",es:"Spanish",fi:"Finnish","fr-ca":"French - Canada",fr:"French - France",hi:"Hindi",it:"Italian",ja:"Japanese",ko:"Korean",nb:"Norwegian (Bokmål)",nl:"Dutch",pl:"Polish",pt:"Portuguese - Brazil",ru:"Russian",sv:"Swedish","zh-Hans":"Chinese (Simplified)","zh-Hant":"Chinese (Traditional)",cs:"Czech","pt-pt":"Portuguese - Portugal",tr:"Turkish",vi:"Vietnamese",th:"Thai",he:"Hebrew",cy:"Welsh",uk:"Ukrainian",el:"Greek",hu:"Hungarian",ro:"Romanian",sk:"Slovak"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"Gallery options",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker layout",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic layout",moreButtonGalleryDefaultLayoutLabel:"Gallery layout",moreButtonGalleryFocusedContentLayoutLabel:"Focused content",capabilityChangedNotification:{turnVideoOn:{lostDueToMeetingOption:"Your camera has been disabled. You can no longer share video.",grantedDueToMeetingOption:"Your camera has been enabled. Turn it on if you'd like to share video."},unmuteMic:{lostDueToMeetingOption:"Your mic has been disabled. You can no longer unmute.",grantedDueToMeetingOption:"Your mic has been enabled. Unmute if you'd like to speak."},shareScreen:{lostDueToRoleChangeToAttendee:"Your role has been changed. Some actions, like sharing content, won't be available to you.",grantedDueToRoleChangeToPresenter:"You're a presenter. You can share content and facilitate the meeting."}}};var chat$k={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$k={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",moreDrawerCaptionLanguageMenuTitle:"Caption language",peopleButtonLabel:"People",selectedPeopleButtonLabel:"People Button Selected",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_US = {call:call$k,chat:chat$k,callWithChat:callWithChat$k};
20349
20354
 
20350
20355
  var call$j={cameraLabel:"Camera",noCamerasLabel:"No cameras found",cameraPermissionDenied:"Your browser is blocking access to your camera",cameraTurnedOff:"Your camera is turned off",chatButtonLabel:"Chat",close:"Close",complianceBannerNowOnlyRecording:"You are now only recording this meeting.",complianceBannerNowOnlyTranscription:"You are now only transcribing this meeting.",complianceBannerRecordingAndTranscriptionSaved:"Recording and transcription are being saved.",complianceBannerRecordingAndTranscriptionStarted:"Recording and transcription have started.",complianceBannerRecordingAndTranscriptionStopped:"Recording and transcription have stopped.",complianceBannerRecordingSaving:"Recording is being saved.",complianceBannerRecordingStarted:"Recording has started.",complianceBannerRecordingStopped:"Recording has stopped.",complianceBannerTranscriptionStarted:"Transcription has started.",complianceBannerTranscriptionConsent:"By joining, you are giving consent for this meeting to be transcribed.",complianceBannerTranscriptionSaving:"Transcription is being saved.",complianceBannerTranscriptionStopped:"Transcription has stopped.",configurationPageTitle:"Start a call",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",defaultPlaceHolder:"Select an option",dismissSidePaneButtonLabel:"Close",videoEffectsPaneTitle:"Effects",videoEffectsPaneBackgroundSelectionTitle:"Background",configurationPageVideoEffectsButtonLabel:"Effects",unableToStartVideoEffect:"Unable to apply video effect.",blurBackgroundEffectButtonLabel:"Blur",blurBackgroundTooltip:"Blur Background",removeBackgroundEffectButtonLabel:"None",removeBackgroundTooltip:"Remove Background",cameraOffBackgroundEffectWarningText:"Your camera is off. Turn on camera to see video effect.",failedToJoinCallDueToNoNetworkMoreDetails:"Call was disconnected due to a network issue. Check your connection and join again.",failedToJoinCallDueToNoNetworkTitle:"Call disconnected",failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails:"You were not granted entry in the call. If this was a mistake, re-join the call.",failedToJoinTeamsMeetingReasonAccessDeniedTitle:"Dismissed from lobby",learnMore:"Learn more",leavingCallTitle:"Leaving...",leftCallMoreDetails:"If this was a mistake, re-join the call.",leftCallTitle:"You left the call",lobbyScreenConnectingToCallTitle:"Joining call",lobbyScreenWaitingToBeAdmittedTitle:"Waiting to be admitted",microphonePermissionDenied:"Your browser is blocking access to your microphone",microphoneToggleInLobbyNotAllowed:"Cannot mute or unmute while in lobby.",mutedMessage:"You're muted",networkReconnectMoreDetails:"Looks like something went wrong. We're trying to get back into the call.",networkReconnectTitle:"Hold on",deniedPermissionToRoomDetails:"You do not have permission to join this room.",deniedPermissionToRoomTitle:"Permission denied to room",peopleButtonLabel:"People",peoplePaneTitle:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call {numberOfPeople}",privacyPolicy:"Privacy policy",rejoinCallButtonLabel:"Re-join call",removedFromCallMoreDetails:"Another participant removed you from the call.",removedFromCallTitle:"You were removed",removeMenuLabel:"Remove",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",roomNotFoundDetails:"Room ID provided is not valid.",roomNotFoundTitle:"Room not found",soundLabel:"Sound",noMicrophonesLabel:"No microphones found",noSpeakersLabel:"No speakers found",startCallButtonLabel:"Start call",openDialpadButtonLabel:"Dial phone number",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",moreButtonCallingLabel:"More",resumeCallButtonLabel:"Resume",resumingCallButtonLabel:"Resuming...",resumeCallButtonAriaLabel:"Resume call",resumingCallButtonAriaLabel:"Resume call",holdScreenLabel:"You're on hold",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number",outboundCallingNoticeString:"Calling...",participantJoinedNoticeString:"{displayName} joined",twoParticipantJoinedNoticeString:"{displayName1} and {displayName2} have joined",threeParticipantJoinedNoticeString:"{displayName1}, {displayName2} and {displayName3} have joined",participantLeftNoticeString:"{displayName} left",twoParticipantLeftNoticeString:"{displayName1} and {displayName2} have left",threeParticipantLeftNoticeString:"{displayName1}, {displayName2} and {displayName3} have left",unnamedParticipantString:"unnamed participant",manyUnnamedParticipantsJoined:"unnamed participant and {numOfParticipants} other participants joined",manyUnnamedParticipantsLeft:"unnamed participant and {numOfParticipants} other participants left",manyParticipantsJoined:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants joined",manyParticipantsLeft:"{displayName1}, {displayName2}, {displayName3} and {numOfParticipants} other participants left",liveCaptionsLabel:"Live captions",captionsSettingsLabel:"Caption settings",startCaptionsButtonOnLabel:"Turn on captions",startCaptionsButtonOffLabel:"Turn off captions",startCaptionsButtonTooltipOnContent:"Turn off captions",startCaptionsButtonTooltipOffContent:"Turn on captions",captionsSettingsModalTitle:"What language is being spoken?",captionsSettingsDropdownLabel:"Spoken language",captionsSettingsDropdownInfoText:"Language that everyone on this call is speaking.",captionsSettingsConfirmButtonLabel:"Confirm",captionsSettingsCancelButtonLabel:"Cancel",captionsSettingsModalAriaLabel:"Captions Setting Modal",captionsSettingsCloseModalButtonAriaLabel:"Close Captions Setting",captionsBannerMoreButtonCallingLabel:"More",captionsBannerMoreButtonTooltip:"More options",captionsAvailableLanguageStrings:{"ar-ae":"Arabic - U.A.E.","ar-sa":"Arabic - Saudi Arabia","da-dk":"Danish","de-de":"German - Germany","en-au":"English - Australia","en-ca":"English - Canada","en-gb":"English - United Kingdom","en-in":"English - India","en-nz":"English - New Zealand","en-us":"English - United States","es-es":"Spanish - Spain (Modern Sort)","es-mx":"Spanish - Mexico","fi-fi":"Finnish","fr-ca":"French - Canada","fr-fr":"French - France","hi-in":"Hindi","it-it":"Italian - Italy","ja-jp":"Japanese","ko-kr":"Korean","nb-no":"Norwegian (Bokmål)","nl-be":"Dutch - Belgium","nl-nl":"Dutch - Netherlands","pl-pl":"Polish","pt-br":"Portuguese - Brazil","ru-ru":"Russian","sv-se":"Swedish","zh-cn":"Chinese - People's Republic of China","zh-hk":"Chinese - Hong Kong SAR","cs-cz":"Czech","pt-pt":"Portuguese - Portugal","tr-tr":"Turkish","vi-vn":"Vietnamese","th-th":"Thai","he-il":"Hebrew","cy-gb":"Welsh","uk-ua":"Ukrainian","el-gr":"Greek","hu-hu":"Hungarian","ro-ro":"Romanian","sk-sk":"Slovak","zh-tw":"Chinese - Taiwan"},captionsBannerSpinnerText:"Starting captions...",transferPageTransferorText:"Transferring...",transferPageTransferTargetText:"Connecting...",transferPageUnknownTransferorDisplayName:"Unknown",transferPageUnknownTransferTargetDisplayName:"Unknown",transferPageNoticeString:"You are being transferred",participantCouldNotBeReachedTitle:"Target participant is currently not available",participantCouldNotBeReachedMoreDetails:"Please contact participant when they are available",permissionToReachTargetParticipantNotAllowedTitle:"Permission to reach target participant is not allowed",permissionToReachTargetParticipantNotAllowedMoreDetails:"Please check that the target participant is in the same tenant",unableToResolveTenantTitle:"Unable to resolve tenant id for the target participant",unableToResolveTenantMoreDetails:"Please check the participant id is entered correctly",participantIdIsMalformedTitle:"Participant id is not in the correct format",participantIdIsMalformedMoreDetails:"Please check that the participant id is in the correct format",moreButtonGalleryControlLabel:"Gallery options",moreButtonGalleryPositionToggleLabel:"Move gallery to top",moreButtonGallerySpeakerLayoutLabel:"Speaker layout",moreButtonGalleryFloatingLocalLayoutLabel:"Dynamic layout",moreButtonGalleryDefaultLayoutLabel:"Gallery layout",moreButtonGalleryFocusedContentLayoutLabel:"Focused content"};var chat$j={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$j={chatButtonLabel:"Chat",chatButtonNewMessageNotificationLabel:"New Message",chatButtonTooltipClosedWithMessageCount:"Show chat ({unreadMessagesCount} unread)",chatButtonTooltipClose:"Hide chat",chatButtonTooltipOpen:"Show chat",chatPaneTitle:"Chat",copyInviteLinkButtonLabel:"Copy invite link",copyInviteLinkActionedAriaLabel:"Invite link copied",dismissSidePaneButtonLabel:"Close",moreDrawerAudioDeviceMenuTitle:"Audio Device",moreDrawerButtonLabel:"More options",moreDrawerButtonTooltip:"More options",moreDrawerMicrophoneMenuTitle:"Microphone",moreDrawerSpeakerMenuTitle:"Speaker",moreDrawerCaptionsMenuTitle:"Live captions",moreDrawerSpokenLanguageMenuTitle:"Spoken language",peopleButtonLabel:"People",peopleButtonTooltipOpen:"Show participants",peopleButtonTooltipClose:"Hide participants",peoplePaneSubTitle:"In this call",peoplePaneTitle:"People",pictureInPictureTileAriaLabel:"Video Feeds. Click to return to call screen.",removeMenuLabel:"Remove",openDialpadButtonLabel:"Dial phone number",returnToCallButtonAriaDescription:"Return to Call",returnToCallButtonAriaLabel:"Back",peoplePaneAddPeopleButtonLabel:"Add People",dialpadStartCallButtonLabel:"Call",dialpadModalTitle:"Dial Phone Number",dialpadModalAriaLabel:"Dialpad",dialpadCloseModalButtonAriaLabel:"Close dialpad",openDtmfDialpadLabel:"Show dialpad",dtmfDialpadPlaceholderText:"Enter number"};var en_GB = {call:call$j,chat:chat$j,callWithChat:callWithChat$j};
20351
20356
 
@@ -23258,6 +23263,11 @@ const getMicrophones = (state) => state.devices.microphones;
23258
23263
  * @private
23259
23264
  */
23260
23265
  const getCameras = (state) => state.devices.cameras;
23266
+ /* @conditional-compile-remove(capabilities) */
23267
+ /**
23268
+ * @private
23269
+ */
23270
+ const getRole = (state) => { var _a; return (_a = state.call) === null || _a === void 0 ? void 0 : _a.role; };
23261
23271
  /**
23262
23272
  * @private
23263
23273
  */
@@ -23311,6 +23321,14 @@ const getCaptionsStatus = (state) => {
23311
23321
  * @private
23312
23322
  */
23313
23323
  const getIsTeamsCall = (state) => state.isTeamsCall;
23324
+ /* @conditional-compile-remove(capabilities) */
23325
+ /**
23326
+ * @private
23327
+ */
23328
+ const getLatestCapabilitiesChangedInfo = (state) => {
23329
+ var _a, _b;
23330
+ return (_b = (_a = state.call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.latestCapabilitiesChangeInfo;
23331
+ };
23314
23332
 
23315
23333
  // Copyright (c) Microsoft Corporation.
23316
23334
  /**
@@ -26190,12 +26208,74 @@ const useMinMaxDragPosition = (modalLayerHostId, rtl) => {
26190
26208
  return { minDragPosition: minDragPosition, maxDragPosition: maxDragPosition };
26191
26209
  };
26192
26210
 
26211
+ // Copyright (c) Microsoft Corporation.
26212
+ /* @conditional-compile-remove(capabilities) */
26213
+ /**
26214
+ * Notification bar for capabilities changed
26215
+ * @private
26216
+ */
26217
+ const CapabilitiesChangedNotificationBar = (props) => {
26218
+ const locale = useLocale();
26219
+ return (React__default['default'].createElement(react.Stack, { "data-ui-id": "capabilities-changed-notification-bar-stack" }, props.capabilitiesChangedNotifications.map((notification) => {
26220
+ const message = getCapabilityChangedNotificationString(notification, locale.strings.call.capabilityChangedNotification);
26221
+ if (!message) {
26222
+ return null;
26223
+ }
26224
+ return (React__default['default'].createElement(react.MessageBar, { key: notification.capabilityName, styles: messageBarStyles, messageBarType: react.MessageBarType.warning, dismissIconProps: { iconName: 'ErrorBarClear' }, onDismiss: () => props.onDismissNotification(notification) }, message));
26225
+ })));
26226
+ };
26227
+ /* @conditional-compile-remove(capabilities) */
26228
+ const getCapabilityChangedNotificationString = (notification, strings) => {
26229
+ var _a, _b, _c, _d, _e, _f;
26230
+ switch (notification.capabilityName) {
26231
+ case 'turnVideoOn':
26232
+ if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {
26233
+ return notification.isPresent
26234
+ ? (_a = strings === null || strings === void 0 ? void 0 : strings.turnVideoOn) === null || _a === void 0 ? void 0 : _a.grantedDueToMeetingOption
26235
+ : (_b = strings === null || strings === void 0 ? void 0 : strings.turnVideoOn) === null || _b === void 0 ? void 0 : _b.lostDueToMeetingOption;
26236
+ }
26237
+ break;
26238
+ case 'unmuteMic':
26239
+ if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {
26240
+ return notification.isPresent
26241
+ ? (_c = strings === null || strings === void 0 ? void 0 : strings.unmuteMic) === null || _c === void 0 ? void 0 : _c.grantedDueToMeetingOption
26242
+ : (_d = strings === null || strings === void 0 ? void 0 : strings.unmuteMic) === null || _d === void 0 ? void 0 : _d.lostDueToMeetingOption;
26243
+ }
26244
+ break;
26245
+ case 'shareScreen':
26246
+ if (notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Presenter') {
26247
+ return (_e = strings === null || strings === void 0 ? void 0 : strings.shareScreen) === null || _e === void 0 ? void 0 : _e.grantedDueToRoleChangeToPresenter;
26248
+ }
26249
+ if (!notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Attendee') {
26250
+ return (_f = strings === null || strings === void 0 ? void 0 : strings.shareScreen) === null || _f === void 0 ? void 0 : _f.lostDueToRoleChangeToAttendee;
26251
+ }
26252
+ break;
26253
+ }
26254
+ return undefined;
26255
+ };
26256
+ /* @conditional-compile-remove(capabilities) */
26257
+ const messageBarStyles = {
26258
+ innerText: {
26259
+ alignSelf: 'center'
26260
+ },
26261
+ icon: {
26262
+ height: 0
26263
+ },
26264
+ content: {
26265
+ lineHeight: 'inherit'
26266
+ },
26267
+ dismissal: {
26268
+ height: 0,
26269
+ paddingTop: '0.8rem'
26270
+ }
26271
+ };
26272
+
26193
26273
  // Copyright (c) Microsoft Corporation.
26194
26274
  /**
26195
26275
  * @private
26196
26276
  */
26197
26277
  const CallArrangement = (props) => {
26198
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
26278
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
26199
26279
  const containerClassName = React.useMemo(() => {
26200
26280
  return props.mobileView ? containerStyleMobile : containerStyleDesktop;
26201
26281
  }, [props.mobileView]);
@@ -26324,13 +26404,18 @@ const CallArrangement = (props) => {
26324
26404
  const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);
26325
26405
  const pipStyles = React.useMemo(() => getPipStyles(theme), [theme]);
26326
26406
  const verticalControlBar = props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;
26407
+ /* @conditional-compile-remove(capabilities) */
26408
+ // Filter out shareScreen capability notifications if on mobile
26409
+ const filteredCapabilitesChangedNotifications = props.mobileView
26410
+ ? (_c = props.capabilitiesChangedNotificationBarProps) === null || _c === void 0 ? void 0 : _c.capabilitiesChangedNotifications.filter((notification) => notification.capabilityName !== 'shareScreen')
26411
+ : (_d = props.capabilitiesChangedNotificationBarProps) === null || _d === void 0 ? void 0 : _d.capabilitiesChangedNotifications;
26327
26412
  return (React__default['default'].createElement("div", { ref: containerRef, className: react.mergeStyles(containerDivStyles), id: props.id },
26328
26413
  React__default['default'].createElement(react.Stack, { verticalFill: true, horizontalAlign: "stretch", className: containerClassName, "data-ui-id": props.dataUiId },
26329
26414
  React__default['default'].createElement(react.Stack, { reversed: true, horizontal: verticalControlBar, grow: true, styles: callArrangementContainerStyles(verticalControlBar) },
26330
- ((_c = props.callControlProps) === null || _c === void 0 ? void 0 : _c.options) !== false && !isMobileWithActivePane && (React__default['default'].createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
26415
+ ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && !isMobileWithActivePane && (React__default['default'].createElement(react.Stack, { verticalAlign: 'center', className: react.mergeStyles({
26331
26416
  zIndex: CONTROL_BAR_Z_INDEX,
26332
26417
  padding: verticalControlBar ? '0.25rem' : 'unset'
26333
- }) }, isLegacyCallControlEnabled((_d = props.callControlProps) === null || _d === void 0 ? void 0 : _d.options) ? (React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView,
26418
+ }) }, isLegacyCallControlEnabled((_f = props.callControlProps) === null || _f === void 0 ? void 0 : _f.options) ? (React__default['default'].createElement(CallControls, Object.assign({}, props.callControlProps, { containerWidth: containerWidth, containerHeight: containerHeight, isMobile: props.mobileView,
26334
26419
  /* @conditional-compile-remove(one-to-n-calling) */
26335
26420
  peopleButtonChecked: isPeoplePaneOpen,
26336
26421
  /* @conditional-compile-remove(one-to-n-calling) */
@@ -26351,7 +26436,7 @@ const CallArrangement = (props) => {
26351
26436
  onUserSetGalleryLayout: props.onUserSetGalleryLayoutChange,
26352
26437
  /* @conditional-compile-remove(gallery-layouts) */
26353
26438
  userSetGalleryLayout: props.userSetGalleryLayout, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef }))))),
26354
- ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && showDrawer && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
26439
+ ((_g = props.callControlProps) === null || _g === void 0 ? void 0 : _g.options) !== false && showDrawer && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
26355
26440
  React__default['default'].createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked,
26356
26441
  /* @conditional-compile-remove(PSTN-calls) */
26357
26442
  onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined,
@@ -26360,7 +26445,7 @@ const CallArrangement = (props) => {
26360
26445
  /* @conditional-compile-remove(close-captions) */
26361
26446
  isCaptionsSupported: isTeamsCall && hasJoinedCall }))),
26362
26447
  /* @conditional-compile-remove(PSTN-calls) */
26363
- ((_f = props.callControlProps) === null || _f === void 0 ? void 0 : _f.options) !== false && showDtmfDialpad && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
26448
+ ((_h = props.callControlProps) === null || _h === void 0 ? void 0 : _h.options) !== false && showDtmfDialpad && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStylesValue },
26364
26449
  React__default['default'].createElement(SendDtmfDialpad, { isMobile: props.mobileView, strings: dialpadStrings, showDialpad: showDtmfDialpad, onDismissDialpad: onDismissDtmfDialpad }))),
26365
26450
  React__default['default'].createElement(react.Stack, { horizontal: true, grow: true },
26366
26451
  React__default['default'].createElement(react.Stack.Item, { style: callCompositeContainerCSS },
@@ -26371,6 +26456,10 @@ const CallArrangement = (props) => {
26371
26456
  React__default['default'].createElement(_ComplianceBanner, Object.assign({}, props.complianceBannerProps))),
26372
26457
  props.errorBarProps !== false && (React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
26373
26458
  React__default['default'].createElement(ErrorBar, Object.assign({}, props.errorBarProps, { onDismissError: props.onDismissError, activeErrorMessages: filteredLatestErrors })))),
26459
+ /* @conditional-compile-remove(capabilities) */
26460
+ props.capabilitiesChangedNotificationBarProps &&
26461
+ props.capabilitiesChangedNotificationBarProps.capabilitiesChangedNotifications.length > 0 && (React__default['default'].createElement(react.Stack, { styles: bannerNotificationStyles },
26462
+ React__default['default'].createElement(CapabilitiesChangedNotificationBar, Object.assign({}, props.capabilitiesChangedNotificationBarProps, { capabilitiesChangedNotifications: filteredCapabilitesChangedNotifications !== null && filteredCapabilitesChangedNotifications !== void 0 ? filteredCapabilitesChangedNotifications : [] })))),
26374
26463
  canUnmute && !!props.mutedNotificationProps && (React__default['default'].createElement(MutedNotification, Object.assign({}, props.mutedNotificationProps)))),
26375
26464
  props.onRenderGalleryContent && props.onRenderGalleryContent(),
26376
26465
  /* @conditional-compile-remove(close-captions) */
@@ -26380,7 +26469,7 @@ const CallArrangement = (props) => {
26380
26469
  maxWidth: isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined, updateSidePaneRenderer: props.updateSidePaneRenderer, onPeopleButtonClicked: props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)
26381
26470
  ? undefined
26382
26471
  : togglePeoplePane, disablePeopleButton: typeof props.callControlProps.options !== 'boolean' &&
26383
- isDisabled$3((_g = props.callControlProps.options) === null || _g === void 0 ? void 0 : _g.participantsButton), onChatButtonClicked: (_h = props.mobileChatTabHeader) === null || _h === void 0 ? void 0 : _h.onClick, disableChatButton: (_j = props.mobileChatTabHeader) === null || _j === void 0 ? void 0 : _j.disabled }),
26472
+ isDisabled$3((_j = props.callControlProps.options) === null || _j === void 0 ? void 0 : _j.participantsButton), onChatButtonClicked: (_k = props.mobileChatTabHeader) === null || _k === void 0 ? void 0 : _k.onClick, disableChatButton: (_l = props.mobileChatTabHeader) === null || _l === void 0 ? void 0 : _l.disabled }),
26384
26473
  props.mobileView && (React__default['default'].createElement(ModalLocalAndRemotePIP, { modalLayerHostId: props.modalLayerHostId, hidden: !isSidePaneOpen, styles: pipStyles, minDragPosition: minMaxDragPosition.minDragPosition, maxDragPosition: minMaxDragPosition.maxDragPosition })),
26385
26474
  drawerMenuItems.length > 0 && (React__default['default'].createElement(react.Stack, { styles: drawerContainerStyles() },
26386
26475
  React__default['default'].createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItems([]), items: drawerMenuItems }))))))));
@@ -26905,7 +26994,9 @@ const CallPage = (props) => {
26905
26994
  /* @conditional-compile-remove(gallery-layouts) */
26906
26995
  onUserSetGalleryLayoutChange: setUserSetGalleryLayout,
26907
26996
  /* @conditional-compile-remove(gallery-layouts) */
26908
- userSetGalleryLayout: userSetGalleryLayout }));
26997
+ userSetGalleryLayout: userSetGalleryLayout,
26998
+ /* @conditional-compile-remove(capabilities) */
26999
+ capabilitiesChangedNotificationBarProps: props.capabilitiesChangedNotificationBarProps }));
26909
27000
  };
26910
27001
  /**
26911
27002
  * @private
@@ -28465,6 +28556,111 @@ const deviceCountSelector = reselect.createSelector([getCameras, getMicrophones]
28465
28556
  };
28466
28557
  });
28467
28558
 
28559
+ // Copyright (c) Microsoft Corporation.
28560
+ /* @conditional-compile-remove(capabilities) */
28561
+ /**
28562
+ * @private
28563
+ */
28564
+ const capabilitiesChangedInfoAndRoleSelector = reselect__namespace.createSelector([getLatestCapabilitiesChangedInfo, getRole], (capabilitiesChangeInfo, participantRole) => {
28565
+ return { capabilitiesChangeInfo, participantRole };
28566
+ });
28567
+
28568
+ // Copyright (c) Microsoft Corporation.
28569
+ /* @conditional-compile-remove(capabilities) */
28570
+ /**
28571
+ * Create a record for when the notification was most recently dismissed for tracking dismissed notifications.
28572
+ *
28573
+ * @private
28574
+ */
28575
+ const useTrackedCapabilityChangedNotifications = (capabilitiesChangedAndRoleInfo) => {
28576
+ const [trackedCapabilityChangedNotifications, setTrackedCapabilityChangedNotifications] = React.useState({});
28577
+ const activeNotifications = React.useRef({});
28578
+ // Take note of first capabilities changed reason
28579
+ const firstCapabilitiesChangedReason = React.useRef();
28580
+ React.useEffect(() => {
28581
+ var _a;
28582
+ if (firstCapabilitiesChangedReason.current === undefined) {
28583
+ firstCapabilitiesChangedReason.current = (_a = capabilitiesChangedAndRoleInfo.capabilitiesChangeInfo) === null || _a === void 0 ? void 0 : _a.reason;
28584
+ // Skip the first notifications if they are role related to be inline with Teams behavior
28585
+ if (firstCapabilitiesChangedReason.current === 'RoleChanged') {
28586
+ return;
28587
+ }
28588
+ }
28589
+ activeNotifications.current = updateLatestCapabilityChangedNotificationMap(capabilitiesChangedAndRoleInfo, activeNotifications.current);
28590
+ setTrackedCapabilityChangedNotifications((prev) => updateTrackedCapabilityChangedNotificationsWithActiveNotifications(prev, Object.values(activeNotifications.current)));
28591
+ }, [capabilitiesChangedAndRoleInfo]);
28592
+ const onDismissCapabilityChangedNotification = React.useCallback((notification) => {
28593
+ setTrackedCapabilityChangedNotifications((prev) => trackCapabilityChangedNotificationAsDismissed(notification.capabilityName, prev));
28594
+ }, []);
28595
+ const latestCapabilityChangedNotifications = React.useMemo(() => filterLatestCapabilityChangedNotifications(Object.values(activeNotifications.current), trackedCapabilityChangedNotifications), [trackedCapabilityChangedNotifications]);
28596
+ return {
28597
+ capabilitiesChangedNotifications: latestCapabilityChangedNotifications,
28598
+ onDismissNotification: onDismissCapabilityChangedNotification
28599
+ };
28600
+ };
28601
+ /* @conditional-compile-remove(capabilities) */
28602
+ /**
28603
+ * Take the set of active notifications, and filter to only those that are newer than previously dismissed notifications or have never been dismissed.
28604
+ *
28605
+ * @private
28606
+ */
28607
+ const filterLatestCapabilityChangedNotifications = (activeNotifications, trackedNotifications) => {
28608
+ const filteredNotifications = activeNotifications.filter((activeNotification) => {
28609
+ const trackedNotification = trackedNotifications[activeNotification.capabilityName];
28610
+ return (!trackedNotification ||
28611
+ !trackedNotification.lastDismissedAt ||
28612
+ trackedNotification.lastDismissedAt < trackedNotification.mostRecentlyActive);
28613
+ });
28614
+ return filteredNotifications;
28615
+ };
28616
+ /* @conditional-compile-remove(capabilities) */
28617
+ /**
28618
+ * Maintain a record of the most recently active notification for each capability name.
28619
+ *
28620
+ * @private
28621
+ */
28622
+ const updateTrackedCapabilityChangedNotificationsWithActiveNotifications = (existingTrackedNotifications, activeNotifications) => {
28623
+ var _a, _b;
28624
+ const trackedNotifications = {};
28625
+ // Only care about active notifications. If notifications are no longer active we do not track that they have been previously dismissed.
28626
+ for (const activeNotification of activeNotifications) {
28627
+ const existingTrackedNotification = existingTrackedNotifications[activeNotification.capabilityName];
28628
+ trackedNotifications[activeNotification.capabilityName] = {
28629
+ mostRecentlyActive: (_b = (_a = activeNotification.timestamp) !== null && _a !== void 0 ? _a : existingTrackedNotification === null || existingTrackedNotification === void 0 ? void 0 : existingTrackedNotification.mostRecentlyActive) !== null && _b !== void 0 ? _b : new Date(Date.now()),
28630
+ lastDismissedAt: existingTrackedNotification === null || existingTrackedNotification === void 0 ? void 0 : existingTrackedNotification.lastDismissedAt
28631
+ };
28632
+ }
28633
+ return trackedNotifications;
28634
+ };
28635
+ /* @conditional-compile-remove(capabilities) */
28636
+ /**
28637
+ * Create a record for when the notification was most recently dismissed for tracking dismissed notifications.
28638
+ *
28639
+ * @private
28640
+ */
28641
+ const trackCapabilityChangedNotificationAsDismissed = (capabilityName, trackedNotifications) => {
28642
+ const now = new Date(Date.now());
28643
+ const existingNotification = trackedNotifications[capabilityName];
28644
+ return Object.assign(Object.assign({}, trackedNotifications), { [capabilityName]: Object.assign(Object.assign({}, (existingNotification || {})), { lastDismissedAt: now }) });
28645
+ };
28646
+ /* @conditional-compile-remove(capabilities) */
28647
+ const updateLatestCapabilityChangedNotificationMap = (capabilitiesChangedInfoAndRole, activeNotifications) => {
28648
+ if (!capabilitiesChangedInfoAndRole.capabilitiesChangeInfo) {
28649
+ return activeNotifications;
28650
+ }
28651
+ for (const [capabilityName, newCapabilityValue] of Object.entries(capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.newValue)) {
28652
+ const newCapabilityChangeNotification = {
28653
+ capabilityName: capabilityName,
28654
+ isPresent: newCapabilityValue.isPresent,
28655
+ changedReason: capabilitiesChangedInfoAndRole.capabilitiesChangeInfo.reason,
28656
+ role: capabilitiesChangedInfoAndRole.participantRole,
28657
+ timestamp: new Date(Date.now())
28658
+ };
28659
+ activeNotifications[capabilityName] = newCapabilityChangeNotification;
28660
+ }
28661
+ return activeNotifications;
28662
+ };
28663
+
28468
28664
  // Copyright (c) Microsoft Corporation.
28469
28665
  // Licensed under the MIT license.
28470
28666
  var __awaiter$7 = (window && window.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -28522,6 +28718,10 @@ const MainScreen = (props) => {
28522
28718
  React.useEffect(() => {
28523
28719
  onSidePaneIdChange === null || onSidePaneIdChange === void 0 ? void 0 : onSidePaneIdChange(sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id);
28524
28720
  }, [sidePaneRenderer === null || sidePaneRenderer === void 0 ? void 0 : sidePaneRenderer.id, onSidePaneIdChange]);
28721
+ /* @conditional-compile-remove(capabilities) */
28722
+ const capabilitiesChangedInfoAndRole = useSelector$1(capabilitiesChangedInfoAndRoleSelector);
28723
+ /* @conditional-compile-remove(capabilities) */
28724
+ const capabilitiesChangedNotificationBarProps = useTrackedCapabilityChangedNotifications(capabilitiesChangedInfoAndRole);
28525
28725
  // Track the last dismissed errors of any error kind to prevent errors from re-appearing on subsequent page navigation
28526
28726
  // This works by tracking the most recent timestamp of any active error type.
28527
28727
  // And then tracking when that error type was last dismissed.
@@ -28557,7 +28757,9 @@ const MainScreen = (props) => {
28557
28757
  /* @conditional-compile-remove(call-readiness) */
28558
28758
  onPermissionsTroubleshootingClick: (_b = props.options) === null || _b === void 0 ? void 0 : _b.onPermissionsTroubleshootingClick,
28559
28759
  /* @conditional-compile-remove(call-readiness) */
28560
- onNetworkingTroubleShootingClick: (_c = props.options) === null || _c === void 0 ? void 0 : _c.onNetworkingTroubleShootingClick }));
28760
+ onNetworkingTroubleShootingClick: (_c = props.options) === null || _c === void 0 ? void 0 : _c.onNetworkingTroubleShootingClick,
28761
+ /* @conditional-compile-remove(capabilities) */
28762
+ capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
28561
28763
  break;
28562
28764
  case 'accessDeniedTeamsMeeting':
28563
28765
  pageElement = (React__default['default'].createElement(NoticePage, { iconName: "NoticePageAccessDeniedTeamsMeeting", title: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle, moreDetails: locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails, dataUiId: 'access-denied-teams-meeting-page' }));
@@ -28577,20 +28779,28 @@ const MainScreen = (props) => {
28577
28779
  break;
28578
28780
  }
28579
28781
  case 'lobby':
28580
- pageElement = (React__default['default'].createElement(LobbyPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError }));
28782
+ pageElement = (React__default['default'].createElement(LobbyPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError,
28783
+ /* @conditional-compile-remove(capabilities) */
28784
+ capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
28581
28785
  break;
28582
28786
  /* @conditional-compile-remove(call-transfer) */
28583
28787
  case 'transferring':
28584
- pageElement = (React__default['default'].createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestErrors, onDismissError: onDismissError }));
28788
+ pageElement = (React__default['default'].createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onRenderAvatar: onRenderAvatar, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestErrors, onDismissError: onDismissError,
28789
+ /* @conditional-compile-remove(capabilities) */
28790
+ capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
28585
28791
  break;
28586
28792
  case 'call':
28587
28793
  pageElement = (React__default['default'].createElement(CallPage, { onRenderAvatar: onRenderAvatar, callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError,
28588
28794
  /* @conditional-compile-remove(gallery-layouts) */
28589
- galleryLayout: ((_f = (_e = props.options) === null || _e === void 0 ? void 0 : _e.galleryOptions) === null || _f === void 0 ? void 0 : _f.layout) ? props.options.galleryOptions.layout : 'floatingLocalVideo' }));
28795
+ galleryLayout: ((_f = (_e = props.options) === null || _e === void 0 ? void 0 : _e.galleryOptions) === null || _f === void 0 ? void 0 : _f.layout) ? props.options.galleryOptions.layout : 'floatingLocalVideo',
28796
+ /* @conditional-compile-remove(capabilities) */
28797
+ capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
28590
28798
  break;
28591
28799
  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
28592
28800
  case 'hold':
28593
- pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError })));
28801
+ pageElement = (React__default['default'].createElement(React__default['default'].Fragment, null, React__default['default'].createElement(HoldPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, latestErrors: latestErrors, onDismissError: onDismissError,
28802
+ /* @conditional-compile-remove(capabilities) */
28803
+ capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps })));
28594
28804
  break;
28595
28805
  }
28596
28806
  /* @conditional-compile-remove(unsupported-browser) */