@azure/communication-react 1.5.1-alpha-202306180015 → 1.5.1-alpha-202306200012

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 (49) hide show
  1. package/dist/communication-react.d.ts +4 -0
  2. package/dist/dist-cjs/communication-react/index.js +168 -105
  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/react-components/src/components/HorizontalGallery.js +6 -3
  7. package/dist/dist-esm/react-components/src/components/HorizontalGallery.js.map +1 -1
  8. package/dist/dist-esm/react-components/src/components/ResponsiveVerticalGallery.d.ts +2 -2
  9. package/dist/dist-esm/react-components/src/components/ResponsiveVerticalGallery.js +2 -1
  10. package/dist/dist-esm/react-components/src/components/ResponsiveVerticalGallery.js.map +1 -1
  11. package/dist/dist-esm/react-components/src/components/TextFieldWithMention/TextFieldWithMention.js +25 -39
  12. package/dist/dist-esm/react-components/src/components/TextFieldWithMention/TextFieldWithMention.js.map +1 -1
  13. package/dist/dist-esm/react-components/src/components/TextFieldWithMention/mentionTagUtils.d.ts +0 -1
  14. package/dist/dist-esm/react-components/src/components/TextFieldWithMention/mentionTagUtils.js +50 -21
  15. package/dist/dist-esm/react-components/src/components/TextFieldWithMention/mentionTagUtils.js.map +1 -1
  16. package/dist/dist-esm/react-components/src/components/VerticalGallery.js +6 -3
  17. package/dist/dist-esm/react-components/src/components/VerticalGallery.js.map +1 -1
  18. package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js +4 -2
  19. package/dist/dist-esm/react-components/src/components/VideoGallery/DefaultLayout.js.map +1 -1
  20. package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js +11 -6
  21. package/dist/dist-esm/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.js.map +1 -1
  22. package/dist/dist-esm/react-components/src/components/VideoGallery/Layout.d.ts +3 -1
  23. package/dist/dist-esm/react-components/src/components/VideoGallery/Layout.js.map +1 -1
  24. package/dist/dist-esm/react-components/src/components/VideoGallery/OverflowGallery.js +3 -3
  25. package/dist/dist-esm/react-components/src/components/VideoGallery/OverflowGallery.js.map +1 -1
  26. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.d.ts +1 -1
  27. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js +6 -3
  28. package/dist/dist-esm/react-components/src/components/VideoGallery/styles/FloatingLocalVideo.styles.js.map +1 -1
  29. package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.d.ts +1 -0
  30. package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js +11 -3
  31. package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js.map +1 -1
  32. package/dist/dist-esm/react-components/src/components/VideoGallery.js +12 -7
  33. package/dist/dist-esm/react-components/src/components/VideoGallery.js.map +1 -1
  34. package/dist/dist-esm/react-components/src/components/VideoTile.js +1 -1
  35. package/dist/dist-esm/react-components/src/components/VideoTile.js.map +1 -1
  36. package/dist/dist-esm/react-components/src/components/styles/VerticalGallery.styles.js +1 -1
  37. package/dist/dist-esm/react-components/src/components/styles/VerticalGallery.styles.js.map +1 -1
  38. package/dist/dist-esm/react-components/src/components/styles/VideoGallery.styles.d.ts +4 -0
  39. package/dist/dist-esm/react-components/src/components/styles/VideoGallery.styles.js +6 -0
  40. package/dist/dist-esm/react-components/src/components/styles/VideoGallery.styles.js.map +1 -1
  41. package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.d.ts +4 -0
  42. package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.js.map +1 -1
  43. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/TransferPage.js +24 -11
  44. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/TransferPage.js.map +1 -1
  45. package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/TransferPage.styles.d.ts +7 -0
  46. package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/TransferPage.styles.js +4 -0
  47. package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/TransferPage.styles.js.map +1 -1
  48. package/dist/dist-esm/react-composites/src/composites/localization/locales/en-US/strings.json +2 -1
  49. package/package.json +8 -8
@@ -167,7 +167,7 @@ const _toCommunicationIdentifier = (id) => {
167
167
  // Copyright (c) Microsoft Corporation.
168
168
  // Licensed under the MIT license.
169
169
  // GENERATED FILE. DO NOT EDIT MANUALLY.
170
- var telemetryVersion = '1.5.1-alpha-202306180015';
170
+ var telemetryVersion = '1.5.1-alpha-202306200012';
171
171
 
172
172
  // Copyright (c) Microsoft Corporation.
173
173
  /**
@@ -6304,10 +6304,14 @@ const getTagClosingTagInfo = (tag) => {
6304
6304
  * @returns Updated HTML and selection index if the selection index should be set.
6305
6305
  */
6306
6306
  const updateHTML = (props) => {
6307
- const { htmlText, oldPlainText, newPlainText, tags, startIndex, oldPlainTextEndIndex, change, mentionTrigger } = props;
6307
+ const { htmlText, oldPlainText, tags, startIndex, oldPlainTextEndIndex, change, mentionTrigger } = props;
6308
6308
  if (tags.length === 0 || (startIndex === 0 && oldPlainTextEndIndex === oldPlainText.length - 1)) {
6309
6309
  // no tags added yet or the whole text is changed
6310
- return { updatedHTML: newPlainText, updatedSelectionIndex: undefined };
6310
+ const changeWithSkippedChars = escapeHTMLChars(change);
6311
+ const updatedHTML = escapeHTMLChars(oldPlainText.substring(0, startIndex)) +
6312
+ changeWithSkippedChars +
6313
+ escapeHTMLChars(oldPlainText.substring(oldPlainTextEndIndex));
6314
+ return { updatedHTML, updatedSelectionIndex: oldPlainTextEndIndex + change.length };
6311
6315
  }
6312
6316
  let result = '';
6313
6317
  let lastProcessedHTMLIndex = 0;
@@ -6317,7 +6321,7 @@ const updateHTML = (props) => {
6317
6321
  // e.g.: change is after and partially in tag => change will be added after the tag and outdated text in the tag will be removed
6318
6322
  // e.g.: change is on the beginning of the tag => change will be added before the tag
6319
6323
  // e.g.: change is on the end of the tag => change will be added to the tag if it's not mention and after the tag if it's mention
6320
- let processedChange = change;
6324
+ let processedChange = escapeHTMLChars(change);
6321
6325
  // end tag plain text index of the last processed tag
6322
6326
  let lastProcessedPlainTextTagEndIndex = 0;
6323
6327
  // as some tags/text can be removed fully, selection should be updated correctly
@@ -6339,13 +6343,13 @@ const updateHTML = (props) => {
6339
6343
  if (startIndex <= tag.plainTextBeginIndex) {
6340
6344
  // change start is before the open tag
6341
6345
  // Math.max(lastProcessedPlainTextTagEndIndex, startIndex) is used as startIndex may not be in [[previous tag].plainTextEndIndex - tag.plainTextBeginIndex] range
6342
- const startChangeDiff = tag.plainTextBeginIndex - Math.max(lastProcessedPlainTextTagEndIndex, startIndex);
6346
+ const startChangeDiff = getChangeDiff(oldPlainText, Math.max(lastProcessedPlainTextTagEndIndex, startIndex), tag.plainTextBeginIndex);
6343
6347
  result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex - startChangeDiff) + processedChange;
6344
6348
  processedChange = '';
6345
6349
  if (oldPlainTextEndIndex <= tag.plainTextBeginIndex) {
6346
6350
  // the whole change is before tag start
6347
6351
  // mentionTag length can be ignored here as the change is before the tag
6348
- const endChangeDiff = tag.plainTextBeginIndex - oldPlainTextEndIndex;
6352
+ const endChangeDiff = getChangeDiff(oldPlainText, oldPlainTextEndIndex, tag.plainTextBeginIndex);
6349
6353
  lastProcessedHTMLIndex = tag.openTagIndex - endChangeDiff;
6350
6354
  // the change is handled; exit
6351
6355
  break;
@@ -6375,13 +6379,13 @@ const updateHTML = (props) => {
6375
6379
  if (startIndex !== tag.plainTextBeginIndex && startIndex !== closingTagInfo.plainTextEndIndex) {
6376
6380
  // mention tag should be deleted when user tries to edit it in the middle
6377
6381
  result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
6378
- changeNewEndIndex = tag.plainTextBeginIndex + processedChange.length;
6382
+ changeNewEndIndex = tag.plainTextBeginIndex + unEscapeHtmlCharacters(processedChange).length;
6379
6383
  lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
6380
6384
  }
6381
6385
  else if (startIndex === tag.plainTextBeginIndex) {
6382
6386
  // non empty change at the beginning of the mention tag to be added before the mention tag
6383
6387
  result += htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex) + processedChange;
6384
- changeNewEndIndex = tag.plainTextBeginIndex + processedChange.length;
6388
+ changeNewEndIndex = tag.plainTextBeginIndex + unEscapeHtmlCharacters(processedChange).length;
6385
6389
  lastProcessedHTMLIndex = tag.openTagIndex;
6386
6390
  }
6387
6391
  else if (startIndex === closingTagInfo.plainTextEndIndex) {
@@ -6389,12 +6393,13 @@ const updateHTML = (props) => {
6389
6393
  result +=
6390
6394
  htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength) +
6391
6395
  processedChange;
6392
- changeNewEndIndex = closingTagInfo.plainTextEndIndex + processedChange.length;
6396
+ changeNewEndIndex = closingTagInfo.plainTextEndIndex + unEscapeHtmlCharacters(processedChange).length;
6393
6397
  lastProcessedHTMLIndex = closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength;
6394
6398
  }
6395
6399
  processedChange = '';
6396
6400
  }
6397
6401
  else {
6402
+ // When change is empty, it means that this change is a deletion
6398
6403
  const updateMentionTagResult = handleMentionTagUpdate({
6399
6404
  htmlText,
6400
6405
  oldPlainText,
@@ -6422,7 +6427,6 @@ const updateHTML = (props) => {
6422
6427
  const updatedContent = updateHTML({
6423
6428
  htmlText: tag.content,
6424
6429
  oldPlainText,
6425
- newPlainText,
6426
6430
  tags: tag.subTags,
6427
6431
  startIndex,
6428
6432
  oldPlainTextEndIndex,
@@ -6434,13 +6438,13 @@ const updateHTML = (props) => {
6434
6438
  }
6435
6439
  else {
6436
6440
  // no subtags
6437
- const startChangeDiff = startIndex - tag.plainTextBeginIndex;
6441
+ const startChangeDiff = getChangeDiff(oldPlainText, tag.plainTextBeginIndex, startIndex);
6438
6442
  result +=
6439
6443
  htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length + startChangeDiff) +
6440
6444
  processedChange;
6441
6445
  processedChange = '';
6442
6446
  if (oldPlainTextEndIndex < closingTagInfo.plainTextEndIndex) {
6443
- const endChangeDiff = oldPlainTextEndIndex - tag.plainTextBeginIndex;
6447
+ const endChangeDiff = getChangeDiff(oldPlainText, tag.plainTextBeginIndex, oldPlainTextEndIndex);
6444
6448
  lastProcessedHTMLIndex = tag.openTagIndex + tag.openTagBody.length + endChangeDiff;
6445
6449
  }
6446
6450
  else if (oldPlainTextEndIndex === closingTagInfo.plainTextEndIndex) {
@@ -6479,7 +6483,6 @@ const updateHTML = (props) => {
6479
6483
  const updatedContent = updateHTML({
6480
6484
  htmlText: tag.content,
6481
6485
  oldPlainText,
6482
- newPlainText,
6483
6486
  tags: tag.subTags,
6484
6487
  startIndex,
6485
6488
  oldPlainTextEndIndex,
@@ -6539,7 +6542,6 @@ const updateHTML = (props) => {
6539
6542
  const updatedContent = updateHTML({
6540
6543
  htmlText: tag.content,
6541
6544
  oldPlainText,
6542
- newPlainText,
6543
6545
  tags: tag.subTags,
6544
6546
  startIndex,
6545
6547
  oldPlainTextEndIndex,
@@ -6555,7 +6557,7 @@ const updateHTML = (props) => {
6555
6557
  htmlText.substring(lastProcessedHTMLIndex, tag.openTagIndex + tag.openTagBody.length) + processedChange;
6556
6558
  processedChange = '';
6557
6559
  // oldPlainTextEndIndex already includes mentionTag length
6558
- const endChangeDiff = closingTagInfo.plainTextEndIndex - oldPlainTextEndIndex;
6560
+ const endChangeDiff = getChangeDiff(oldPlainText, oldPlainTextEndIndex, closingTagInfo.plainTextEndIndex);
6559
6561
  // as change may be before the end of the tag, we need to add the rest of the tag
6560
6562
  lastProcessedHTMLIndex = closingTagInfo.closeTagIdx - endChangeDiff;
6561
6563
  }
@@ -6567,9 +6569,9 @@ const updateHTML = (props) => {
6567
6569
  if (i === tags.length - 1 && oldPlainTextEndIndex >= closingTagInfo.plainTextEndIndex) {
6568
6570
  // the last tag should handle the end of the change if needed
6569
6571
  // oldPlainTextEndIndex already includes mentionTag length
6570
- const endChangeDiff = oldPlainTextEndIndex - closingTagInfo.plainTextEndIndex;
6572
+ const endChangeDiff = getChangeDiff(oldPlainText, closingTagInfo.plainTextEndIndex, oldPlainTextEndIndex);
6571
6573
  if (startIndex >= closingTagInfo.plainTextEndIndex) {
6572
- const startChangeDiff = startIndex - closingTagInfo.plainTextEndIndex;
6574
+ const startChangeDiff = getChangeDiff(oldPlainText, closingTagInfo.plainTextEndIndex, startIndex);
6573
6575
  result +=
6574
6576
  htmlText.substring(lastProcessedHTMLIndex, closingTagInfo.closeTagIdx + closingTagInfo.closeTagLength + startChangeDiff) + processedChange;
6575
6577
  }
@@ -6719,17 +6721,18 @@ const textToTagParser = (text, trigger) => {
6719
6721
  if (!foundHtmlTag) {
6720
6722
  if (parseIndex !== 0) {
6721
6723
  // Add the remaining text to the plain text representation
6722
- plainTextRepresentation += text.substring(parseIndex);
6724
+ const newText = text.substring(parseIndex);
6725
+ plainTextRepresentation += unEscapeHtmlCharacters(newText);
6723
6726
  }
6724
6727
  else {
6725
- plainTextRepresentation = text;
6728
+ plainTextRepresentation = unEscapeHtmlCharacters(text);
6726
6729
  }
6727
6730
  break;
6728
6731
  }
6729
6732
  if (foundHtmlTag.type === 'open' || foundHtmlTag.type === 'self-closing') {
6730
6733
  const nextTag = parseOpenTag(foundHtmlTag.content, foundHtmlTag.startIdx);
6731
6734
  // Add the plain text between the last tag and this one found
6732
- plainTextRepresentation += text.substring(parseIndex, foundHtmlTag.startIdx);
6735
+ plainTextRepresentation += unEscapeHtmlCharacters(text.substring(parseIndex, foundHtmlTag.startIdx));
6733
6736
  nextTag.plainTextBeginIndex = plainTextRepresentation.length;
6734
6737
  if (foundHtmlTag.type === 'open') {
6735
6738
  tagParseStack.push(nextTag);
@@ -6755,14 +6758,14 @@ const textToTagParser = (text, trigger) => {
6755
6758
  plainTextRepresentation.slice(currentOpenTag.plainTextBeginIndex);
6756
6759
  }
6757
6760
  if (!currentOpenTag.subTags) {
6758
- plainTextRepresentation += currentOpenTag.content;
6761
+ plainTextRepresentation += unEscapeHtmlCharacters(currentOpenTag.content);
6759
6762
  }
6760
6763
  else if (currentOpenTag.subTags.length > 0) {
6761
6764
  // Add text after the last tag
6762
6765
  const lastSubTag = currentOpenTag.subTags[currentOpenTag.subTags.length - 1];
6763
6766
  const startOfRemainingText = ((_a = lastSubTag.closingTagIndex) !== null && _a !== void 0 ? _a : lastSubTag.openTagIndex) + lastSubTag.tagType.length + 3;
6764
6767
  const trailingText = currentOpenTag.content.substring(startOfRemainingText);
6765
- plainTextRepresentation += trailingText;
6768
+ plainTextRepresentation += unEscapeHtmlCharacters(trailingText);
6766
6769
  }
6767
6770
  currentOpenTag.plainTextEndIndex = plainTextRepresentation.length;
6768
6771
  addTag(currentOpenTag, tagParseStack, tags);
@@ -6850,6 +6853,32 @@ const addTag = (tag, parseStack, tags) => {
6850
6853
  }
6851
6854
  }
6852
6855
  };
6856
+ // We should revisit this in the future when we support other text such as rich text editing.
6857
+ const escapeHTMLChars = (text) => {
6858
+ const mentionRegex = new RegExp(`<${MSFT_MENTION_TAG}(.*?)>(.*?)</${MSFT_MENTION_TAG}>`, 'i');
6859
+ if (!text.match(mentionRegex)) {
6860
+ return text
6861
+ .replace(/&(?![A-Z]+;)/gi, '&amp;')
6862
+ .replace(/</g, '&lt;')
6863
+ .replace(/>/g, '&gt;');
6864
+ }
6865
+ return text;
6866
+ };
6867
+ const getChangeDiff = (plainText, startIndex, endIndex) => {
6868
+ return endIndex - startIndex + getLengthDiffForEscapedHtmlChars(plainText, startIndex, endIndex);
6869
+ };
6870
+ const getLengthDiffForEscapedHtmlChars = (text, startIndex, endIndex) => {
6871
+ var _a, _b;
6872
+ const subText = text.substring(startIndex, endIndex);
6873
+ const escapedAngleBracketCount = ((_a = subText.match(/(<)|(>)/g)) === null || _a === void 0 ? void 0 : _a.length) || 0;
6874
+ let escapedCharLength = escapedAngleBracketCount * ('&lt;'.length - '<'.length);
6875
+ const escapedAmpersandCount = ((_b = subText.match(/&/g)) === null || _b === void 0 ? void 0 : _b.length) || 0;
6876
+ escapedCharLength += escapedAmpersandCount * ('&amp;'.length - '&'.length);
6877
+ return escapedCharLength;
6878
+ };
6879
+ const unEscapeHtmlCharacters = (text) => {
6880
+ return text.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
6881
+ };
6853
6882
 
6854
6883
  // Copyright (c) Microsoft Corporation.
6855
6884
  /**
@@ -7117,13 +7146,11 @@ const TextFieldWithMention = (props) => {
7117
7146
  const oldPlainText = inputTextValue;
7118
7147
  const mention = htmlStringForMentionSuggestion(suggestion, localeStrings);
7119
7148
  // update plain text with the mention html text
7120
- const newPlainText = inputTextValue.substring(0, currentTriggerStartIndex) + mention + inputTextValue.substring(selectionEnd);
7121
7149
  const triggerText = (_b = mentionLookupOptions === null || mentionLookupOptions === void 0 ? void 0 : mentionLookupOptions.trigger) !== null && _b !== void 0 ? _b : DEFAULT_MENTION_TRIGGER;
7122
7150
  // update html text with updated plain text
7123
7151
  const updatedContent = updateHTML({
7124
7152
  htmlText: textValue,
7125
7153
  oldPlainText,
7126
- newPlainText,
7127
7154
  tags: tagsValue,
7128
7155
  startIndex: currentTriggerStartIndex,
7129
7156
  oldPlainTextEndIndex: selectionEnd,
@@ -7438,44 +7465,32 @@ const TextFieldWithMention = (props) => {
7438
7465
  }
7439
7466
  }
7440
7467
  }
7441
- let result = '';
7442
- if (tagsValue.length === 0) {
7443
- // no tags in the string and newValue should be used as a result string
7444
- result = newValue;
7445
- }
7446
- else {
7447
- // there are tags in the text value and htmlTextValue is html string
7448
- // find diff between old and new text
7449
- const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes({
7450
- oldText: inputTextValue,
7451
- newText: newValue,
7452
- previousSelectionStart: previousSelectionStartValue,
7453
- previousSelectionEnd: previousSelectionEndValue,
7454
- currentSelectionStart: currentSelectionStartValue,
7455
- currentSelectionEnd: currentSelectionEndValue
7456
- });
7457
- const change = newValue.substring(changeStart, newChangeEnd);
7458
- // get updated html string
7459
- const updatedContent = updateHTML({
7460
- htmlText: htmlTextValue,
7461
- oldPlainText: inputTextValue,
7462
- newPlainText: newValue,
7463
- tags: tagsValue,
7464
- startIndex: changeStart,
7465
- oldPlainTextEndIndex: oldChangeEnd,
7466
- change,
7467
- mentionTrigger: triggerText
7468
- });
7469
- result = updatedContent.updatedHTML;
7470
- // update caret index if needed
7471
- if (updatedContent.updatedSelectionIndex !== undefined) {
7472
- setCaretIndex(updatedContent.updatedSelectionIndex);
7473
- setSelectionEndValue(updatedContent.updatedSelectionIndex);
7474
- setSelectionStartValue(updatedContent.updatedSelectionIndex);
7475
- }
7476
- }
7477
- onChange && onChange(event, result);
7478
- }), [onChange, mentionLookupOptions, setCaretIndex, setCaretPosition, updateMentionSuggestions, debouncedQueryUpdate]);
7468
+ const { changeStart, oldChangeEnd, newChangeEnd } = findStringsDiffIndexes({
7469
+ oldText: inputTextValue,
7470
+ newText: newValue,
7471
+ previousSelectionStart: previousSelectionStartValue,
7472
+ previousSelectionEnd: previousSelectionEndValue,
7473
+ currentSelectionStart: currentSelectionStartValue,
7474
+ currentSelectionEnd: currentSelectionEndValue
7475
+ });
7476
+ const change = newValue.substring(changeStart, newChangeEnd);
7477
+ const updatedContent = updateHTML({
7478
+ htmlText: htmlTextValue,
7479
+ oldPlainText: inputTextValue,
7480
+ tags: tagsValue,
7481
+ startIndex: changeStart,
7482
+ oldPlainTextEndIndex: oldChangeEnd,
7483
+ change,
7484
+ mentionTrigger: triggerText
7485
+ });
7486
+ // update caret index if needed
7487
+ if (updatedContent.updatedSelectionIndex !== undefined) {
7488
+ setCaretIndex(updatedContent.updatedSelectionIndex);
7489
+ setSelectionEndValue(updatedContent.updatedSelectionIndex);
7490
+ setSelectionStartValue(updatedContent.updatedSelectionIndex);
7491
+ }
7492
+ onChange && onChange(event, updatedContent.updatedHTML);
7493
+ }), [debouncedQueryUpdate, mentionLookupOptions, onChange, updateMentionSuggestions]);
7479
7494
  // Adjust the selection range based on a mouse / touch interaction
7480
7495
  const handleOnMove = React.useCallback(({ event, selectionStartValue, selectionEndValue, interactionStartSelection, shouldHandleMoveEvent }) => {
7481
7496
  if (shouldHandleMoveEvent &&
@@ -11271,7 +11286,7 @@ const VideoTile = (props) => {
11271
11286
  }
11272
11287
  const currentObserver = observer.current;
11273
11288
  return () => currentObserver.disconnect();
11274
- }, [observer, videoTileRef]);
11289
+ }, [videoTileRef]);
11275
11290
  /* @conditional-compile-remove(pinned-participants) */
11276
11291
  const useLongPressProps = React.useMemo(() => {
11277
11292
  return {
@@ -11630,6 +11645,12 @@ const localVideoCameraCycleButtonStyles = (theme) => {
11630
11645
  }
11631
11646
  };
11632
11647
  };
11648
+ /**
11649
+ * @private
11650
+ */
11651
+ const localVideoTileContainerStyles = {
11652
+ root: { width: '100%', height: '100%' }
11653
+ };
11633
11654
 
11634
11655
  // Copyright (c) Microsoft Corporation.
11635
11656
  /**
@@ -11772,7 +11793,7 @@ const DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS = 6;
11772
11793
  const _useOrganizedParticipants = (props) => {
11773
11794
  const visibleGridParticipants = React.useRef([]);
11774
11795
  const visibleOverflowGalleryParticipants = React.useRef([]);
11775
- const { remoteParticipants = [], dominantSpeakers = [], maxRemoteVideoStreams, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [] } = props;
11796
+ const { remoteParticipants = [], localParticipant, dominantSpeakers = [], maxRemoteVideoStreams, maxOverflowGalleryDominantSpeakers = DEFAULT_MAX_OVERFLOW_GALLERY_DOMINANT_SPEAKERS, isScreenShareActive = false, pinnedParticipantUserIds = [] } = props;
11776
11797
  const videoParticipants = remoteParticipants.filter((p) => { var _a; return (_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable; });
11777
11798
  visibleGridParticipants.current =
11778
11799
  pinnedParticipantUserIds.length > 0 || isScreenShareActive
@@ -11810,7 +11831,13 @@ const _useOrganizedParticipants = (props) => {
11810
11831
  ]);
11811
11832
  const gridParticipants = getGridParticipants();
11812
11833
  const getOverflowGalleryRemoteParticipants = React.useCallback(() => {
11813
- if (isScreenShareActive) {
11834
+ if (isScreenShareActive && localParticipant) {
11835
+ const localParticipantPlusOverflow = [localParticipant].concat(visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current));
11836
+ // If screen sharing is active, assign video and audio participants as overflow gallery participants
11837
+ /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
11838
+ return localParticipantPlusOverflow.concat(callingParticipants);
11839
+ }
11840
+ else if (isScreenShareActive) {
11814
11841
  // If screen sharing is active, assign video and audio participants as overflow gallery participants
11815
11842
  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
11816
11843
  return visibleGridParticipants.current.concat(visibleOverflowGalleryParticipants.current.concat(callingParticipants));
@@ -11825,7 +11852,8 @@ const _useOrganizedParticipants = (props) => {
11825
11852
  }
11826
11853
  }, [
11827
11854
  /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ callingParticipants,
11828
- isScreenShareActive
11855
+ isScreenShareActive,
11856
+ localParticipant
11829
11857
  ]);
11830
11858
  const overflowGalleryParticipants = getOverflowGalleryRemoteParticipants();
11831
11859
  return { gridParticipants, overflowGalleryParticipants: overflowGalleryParticipants };
@@ -11978,9 +12006,12 @@ const HorizontalGallery = (props) => {
11978
12006
  const firstIndexOfCurrentPage = page * childrenPerPage;
11979
12007
  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
11980
12008
  const childrenOnCurrentPage = React.useMemo(() => {
11981
- return indexesArray[clippedPage].map((index) => {
11982
- return React__default['default'].Children.toArray(children)[index];
11983
- });
12009
+ if (indexesArray[0] !== undefined) {
12010
+ return indexesArray[clippedPage].map((index) => {
12011
+ return React__default['default'].Children.toArray(children)[index];
12012
+ });
12013
+ }
12014
+ return [];
11984
12015
  }, [indexesArray, clippedPage, children]);
11985
12016
  const showButtons = numberOfChildren > childrenPerPage;
11986
12017
  const disablePreviousButton = page === 0;
@@ -12036,10 +12067,13 @@ const LOCAL_VIDEO_TILE_ZINDEX = 2;
12036
12067
  /**
12037
12068
  * @private
12038
12069
  */
12039
- const localVideoTileContainerStyle = (theme, localVideoTileSizeRem) => {
12070
+ const localVideoTileContainerStyle = (theme, localVideoTileSizeRem, screenSharePresent) => {
12071
+ console.log(screenSharePresent);
12040
12072
  return {
12041
- minWidth: `${localVideoTileSizeRem.width}rem`,
12042
- minHeight: `${localVideoTileSizeRem.height}rem`,
12073
+ width: screenSharePresent ? `${localVideoTileSizeRem.width}rem` : '',
12074
+ height: screenSharePresent ? `${localVideoTileSizeRem.height}rem` : '',
12075
+ minWidth: screenSharePresent ? '' : `${localVideoTileSizeRem.width}rem`,
12076
+ minHeight: screenSharePresent ? '' : `${localVideoTileSizeRem.height}rem`,
12043
12077
  position: 'absolute',
12044
12078
  bottom: `${localVideoTileOuterPaddingRem}rem`,
12045
12079
  borderRadius: theme.effects.roundedCorner4,
@@ -12366,7 +12400,7 @@ const childrenContainerStyle = (pageControlBarHeight) => {
12366
12400
  */
12367
12401
  const rootStyle = {
12368
12402
  height: '100%',
12369
- width: '100%',
12403
+ width: 'inherit',
12370
12404
  gap: `${VERTICAL_GALLERY_GAP}rem`,
12371
12405
  position: 'relative'
12372
12406
  };
@@ -12435,9 +12469,12 @@ const VerticalGallery = (props) => {
12435
12469
  const firstIndexOfCurrentPage = (page - 1) * childrenPerPage;
12436
12470
  const clippedPage = firstIndexOfCurrentPage < numberOfChildren - 1 ? page : lastPage;
12437
12471
  const childrenOnCurrentPage = React.useMemo(() => {
12438
- return indexesArray[clippedPage - 1].map((index) => {
12439
- return React__default['default'].Children.toArray(children)[index];
12440
- });
12472
+ if (indexesArray[0] !== undefined) {
12473
+ return indexesArray[clippedPage - 1].map((index) => {
12474
+ return React__default['default'].Children.toArray(children)[index];
12475
+ });
12476
+ }
12477
+ return;
12441
12478
  }, [indexesArray, clippedPage, children]);
12442
12479
  const showButtons = numberOfChildren > childrenPerPage;
12443
12480
  const onPreviousButtonClick = () => {
@@ -12521,13 +12558,14 @@ const VerticalGalleryControlBar = (props) => {
12521
12558
  * @beta
12522
12559
  */
12523
12560
  const ResponsiveVerticalGallery = (props) => {
12561
+ var _a;
12524
12562
  const { children, containerStyles, verticalGalleryStyles, gapHeightRem, controlBarHeightRem, isShort, onFetchTilesToRender, onChildrenPerPageChange } = props;
12525
12563
  const containerRef = React.useRef(null);
12526
12564
  const containerHeight = _useContainerHeight(containerRef);
12527
12565
  const topPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingTop) : 0;
12528
12566
  const bottomPadding = containerRef.current ? parseFloat(getComputedStyle(containerRef.current).paddingBottom) : 0;
12529
12567
  const childrenPerPage = calculateVerticalChildrenPerPage({
12530
- numberOfChildren: React__default['default'].Children.count(children),
12568
+ numberOfChildren: (_a = React__default['default'].Children.count(children)) !== null && _a !== void 0 ? _a : 0,
12531
12569
  containerHeight: (containerHeight !== null && containerHeight !== void 0 ? containerHeight : 0) - topPadding - bottomPadding,
12532
12570
  gapHeightRem,
12533
12571
  controlBarHeight: controlBarHeightRem !== null && controlBarHeightRem !== void 0 ? controlBarHeightRem : 2,
@@ -12621,16 +12659,16 @@ const OverflowGallery = (props) => {
12621
12659
  ]);
12622
12660
  /* @conditional-compile-remove(vertical-gallery) */
12623
12661
  if (overflowGalleryPosition === 'VerticalRight') {
12624
- return (React__default['default'].createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements));
12662
+ return (React__default['default'].createElement(ResponsiveVerticalGallery, { key: "responsive-vertical-gallery", containerStyles: containerStyles, verticalGalleryStyles: galleryStyles, controlBarHeightRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapHeightRem: HORIZONTAL_GALLERY_GAP, isShort: isShort, onFetchTilesToRender: onFetchTilesToRender, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React__default['default'].createElement(React__default['default'].Fragment, null)]));
12625
12663
  }
12626
12664
  /* @conditional-compile-remove(pinned-participants) */
12627
12665
  if (isNarrow) {
12628
12666
  // There are no pages for ScrollableHorizontalGallery so we will approximate the first 3 remote
12629
12667
  // participant tiles are visible
12630
12668
  onChildrenPerPageChange === null || onChildrenPerPageChange === void 0 ? void 0 : onChildrenPerPageChange(3);
12631
- return (React__default['default'].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements, onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery" }));
12669
+ return (React__default['default'].createElement(ScrollableHorizontalGallery, { horizontalGalleryElements: overflowGalleryElements ? overflowGalleryElements : [React__default['default'].createElement(React__default['default'].Fragment, null)], onFetchTilesToRender: onFetchTilesToRender, key: "scrollable-horizontal-gallery" }));
12632
12670
  }
12633
- return (React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements));
12671
+ return (React__default['default'].createElement(ResponsiveHorizontalGallery, { key: "responsive-horizontal-gallery", containerStyles: containerStyles, onFetchTilesToRender: onFetchTilesToRender, horizontalGalleryStyles: galleryStyles, buttonWidthRem: HORIZONTAL_GALLERY_BUTTON_WIDTH, gapWidthRem: HORIZONTAL_GALLERY_GAP, onChildrenPerPageChange: onChildrenPerPageChange }, overflowGalleryElements ? overflowGalleryElements : [React__default['default'].createElement(React__default['default'].Fragment, null)]));
12634
12672
  };
12635
12673
 
12636
12674
  // Copyright (c) Microsoft Corporation.
@@ -12641,7 +12679,7 @@ const OverflowGallery = (props) => {
12641
12679
  * @private
12642
12680
  */
12643
12681
  const DefaultLayout = (props) => {
12644
- const { remoteParticipants = [], dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth,
12682
+ const { remoteParticipants = [], localParticipant, dominantSpeakers, localVideoComponent, screenShareComponent, onRenderRemoteParticipant, styles, maxRemoteVideoStreams, parentWidth,
12645
12683
  /* @conditional-compile-remove(vertical-gallery) */
12646
12684
  parentHeight, pinnedParticipantUserIds = [],
12647
12685
  /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom' } = props;
@@ -12650,14 +12688,16 @@ const DefaultLayout = (props) => {
12650
12688
  const isShort = parentHeight ? isShortHeight(parentHeight) : false;
12651
12689
  // This is for tracking the number of children in the first page of overflow gallery.
12652
12690
  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
12691
+ // We need to add the local participant to the pinned participant count so we are placing the speakers correctly.
12653
12692
  const childrenPerPage = React.useRef(4);
12654
12693
  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
12655
12694
  remoteParticipants,
12695
+ localParticipant,
12656
12696
  dominantSpeakers,
12657
12697
  maxRemoteVideoStreams,
12658
12698
  isScreenShareActive: !!screenShareComponent,
12659
12699
  maxOverflowGalleryDominantSpeakers: screenShareComponent
12660
- ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
12700
+ ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
12661
12701
  : childrenPerPage.current,
12662
12702
  /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
12663
12703
  });
@@ -13502,7 +13542,10 @@ const FloatingLocalVideoLayout = (props) => {
13502
13542
  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
13503
13543
  var _a, _b;
13504
13544
  return onRenderRemoteParticipant(p, maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
13505
- ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && indexesToRender.includes(i) && activeVideoStreams++ < maxRemoteVideoStreams
13545
+ ? ((_a = p.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) &&
13546
+ indexesToRender &&
13547
+ indexesToRender.includes(i) &&
13548
+ activeVideoStreams++ < maxRemoteVideoStreams
13506
13549
  : (_b = p.videoStream) === null || _b === void 0 ? void 0 : _b.isAvailable);
13507
13550
  });
13508
13551
  const layerHostId = reactHooks.useId('layerhost');
@@ -13511,7 +13554,7 @@ const FloatingLocalVideoLayout = (props) => {
13511
13554
  return SMALL_FLOATING_MODAL_SIZE_REM;
13512
13555
  }
13513
13556
  /* @conditional-compile-remove(vertical-gallery) */
13514
- if (overflowGalleryTiles.length > 0 && overflowGalleryPosition === 'VerticalRight') {
13557
+ if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'VerticalRight') {
13515
13558
  return isNarrow
13516
13559
  ? SMALL_FLOATING_MODAL_SIZE_REM
13517
13560
  : isShort
@@ -13519,25 +13562,26 @@ const FloatingLocalVideoLayout = (props) => {
13519
13562
  : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
13520
13563
  }
13521
13564
  /*@conditional-compile-remove(click-to-call) */
13522
- if (overflowGalleryTiles.length > 0 && overflowGalleryPosition === 'HorizontalBottom') {
13565
+ if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'HorizontalBottom') {
13523
13566
  return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;
13524
13567
  }
13525
13568
  return LARGE_FLOATING_MODAL_SIZE_REM;
13526
13569
  }, [
13527
13570
  overflowGalleryTiles.length,
13528
13571
  isNarrow,
13572
+ screenShareComponent,
13529
13573
  /* @conditional-compile-remove(vertical-gallery) */ isShort,
13530
13574
  /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
13531
13575
  /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
13532
13576
  ]);
13533
- const wrappedLocalVideoComponent = localVideoComponent && shouldFloatLocalVideo ? (
13577
+ const wrappedLocalVideoComponent = (localVideoComponent && shouldFloatLocalVideo) || (screenShareComponent && localVideoComponent) ? (
13534
13578
  // When we use showCameraSwitcherInLocalPreview it disables dragging to allow keyboard navigation.
13535
13579
  showCameraSwitcherInLocalPreview ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileWithControlsContainerStyle(theme, localVideoSizeRem), {
13536
13580
  boxShadow: theme.effects.elevation8,
13537
13581
  zIndex: LOCAL_VIDEO_TILE_ZINDEX
13538
- }) }, localVideoComponent)) : overflowGalleryTiles.length > 0 ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
13582
+ }) }, localVideoComponent)) : overflowGalleryTiles.length > 0 || screenShareComponent ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem, !!screenShareComponent)) }, localVideoComponent)) : (React__default['default'].createElement(FloatingLocalVideo, { localVideoComponent: localVideoComponent, layerHostId: layerHostId, localVideoSizeRem: localVideoSizeRem, parentWidth: parentWidth, parentHeight: parentHeight }))) : undefined;
13539
13583
  const overflowGallery = React.useMemo(() => {
13540
- if (overflowGalleryTiles.length === 0) {
13584
+ if (overflowGalleryTiles.length === 0 && !screenShareComponent) {
13541
13585
  return null;
13542
13586
  }
13543
13587
  return (React__default['default'].createElement(OverflowGallery
@@ -13554,6 +13598,7 @@ const FloatingLocalVideoLayout = (props) => {
13554
13598
  }, [
13555
13599
  isNarrow,
13556
13600
  /* @conditional-compile-remove(vertical-gallery) */ isShort,
13601
+ screenShareComponent,
13557
13602
  overflowGalleryTiles,
13558
13603
  styles === null || styles === void 0 ? void 0 : styles.horizontalGallery,
13559
13604
  /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
@@ -13670,7 +13715,7 @@ const VideoGallery = (props) => {
13670
13715
  root: { borderRadius: theme.effects.roundedCorner4 }
13671
13716
  }, styles === null || styles === void 0 ? void 0 : styles.localVideo);
13672
13717
  const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;
13673
- return (React__default['default'].createElement(react.Stack, { key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
13718
+ return (React__default['default'].createElement(react.Stack, { styles: localVideoTileContainerStyles, key: "local-video-tile-key", tabIndex: 0, "aria-label": strings.localVideoMovementLabel, role: 'dialog' },
13674
13719
  React__default['default'].createElement(_LocalVideoTile, { userId: localParticipant.userId, onCreateLocalStreamView: onCreateLocalStreamView, onDisposeLocalStreamView: onDisposeLocalStreamView, isAvailable: (_a = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, isMuted: localParticipant.isMuted, renderElement: (_b = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, displayName: isNarrow ? '' : strings.localVideoLabel, initialsName: initialsName, localVideoViewOptions: localVideoViewOptions, onRenderAvatar: onRenderAvatar, showLabel: !((shouldFloatLocalVideo && isNarrow) ||
13675
13720
  /*@conditional-compile-remove(click-to-call) */ localVideoTileSize === '9:16'), showMuteIndicator: showMuteIndicator, showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: strings.localVideoCameraSwitcherLabel, localVideoSelectedDescription: strings.localVideoSelectedDescription, styles: localVideoTileStyles })));
13676
13721
  }, [
@@ -13732,11 +13777,13 @@ const VideoGallery = (props) => {
13732
13777
  /* @conditional-compile-remove(PSTN-calls) */
13733
13778
  participantState: participant.state,
13734
13779
  /* @conditional-compile-remove(pinned-participants) */
13735
- menuKind: remoteVideoTileMenuOptions
13736
- ? remoteVideoTileMenuOptions.kind === 'drawer'
13737
- ? 'drawer'
13738
- : 'contextual'
13739
- : undefined,
13780
+ menuKind: participant.userId === localParticipant.userId
13781
+ ? undefined
13782
+ : remoteVideoTileMenuOptions
13783
+ ? remoteVideoTileMenuOptions.kind === 'drawer'
13784
+ ? 'drawer'
13785
+ : 'contextual'
13786
+ : undefined,
13740
13787
  /* @conditional-compile-remove(pinned-participants) */
13741
13788
  drawerMenuHostId: drawerMenuHostId,
13742
13789
  /* @conditional-compile-remove(pinned-participants) */
@@ -13753,6 +13800,7 @@ const VideoGallery = (props) => {
13753
13800
  onCreateRemoteStreamView,
13754
13801
  onDisposeRemoteVideoStreamView,
13755
13802
  remoteVideoViewOptions,
13803
+ localParticipant,
13756
13804
  onRenderAvatar,
13757
13805
  showMuteIndicator,
13758
13806
  strings,
@@ -13773,6 +13821,7 @@ const VideoGallery = (props) => {
13773
13821
  : undefined;
13774
13822
  const layoutProps = React.useMemo(() => ({
13775
13823
  remoteParticipants,
13824
+ localParticipant,
13776
13825
  screenShareComponent,
13777
13826
  showCameraSwitcherInLocalPreview,
13778
13827
  maxRemoteVideoStreams,
@@ -13787,6 +13836,7 @@ const VideoGallery = (props) => {
13787
13836
  /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
13788
13837
  }), [
13789
13838
  remoteParticipants,
13839
+ localParticipant,
13790
13840
  screenShareComponent,
13791
13841
  showCameraSwitcherInLocalPreview,
13792
13842
  maxRemoteVideoStreams,
@@ -18786,7 +18836,7 @@ const CallCompositeIcon = (props) => (React__default['default'].createElement(re
18786
18836
  */
18787
18837
  const CallWithChatCompositeIcon = (props) => (React__default['default'].createElement(react.FontIcon, Object.assign({}, props)));
18788
18838
 
18789
- 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",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"};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_US = {call:call$j,chat:chat$j,callWithChat:callWithChat$j};
18839
+ 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",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"};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_US = {call:call$j,chat:chat$j,callWithChat:callWithChat$j};
18790
18840
 
18791
18841
  var call$i={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",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"};var chat$i={chatListHeader:"In this chat",uploadFile:"Upload File"};var callWithChat$i={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$i,chat:chat$i,callWithChat:callWithChat$i};
18792
18842
 
@@ -26021,6 +26071,10 @@ const outboundCallStringsTrampoline = (strings) => {
26021
26071
 
26022
26072
  // Copyright (c) Microsoft Corporation.
26023
26073
  // Licensed under the MIT license.
26074
+ /**
26075
+ * @private
26076
+ */
26077
+ const pageContainer = { width: '100%', height: '100%' };
26024
26078
  /**
26025
26079
  * @private
26026
26080
  */
@@ -26081,6 +26135,8 @@ const TransferPage = (props) => {
26081
26135
  const remoteParticipants = useSelector$1(getRemoteParticipants);
26082
26136
  /* @conditional-compile-remove(call-transfer) */
26083
26137
  const transferCall = useSelector$1(getTransferCall);
26138
+ /* @conditional-compile-remove(call-transfer) */
26139
+ const [announcerString, setAnnouncerString] = React.useState(undefined);
26084
26140
  // Reduce the controls shown when mobile view is enabled.
26085
26141
  const callControlOptions = props.mobileView
26086
26142
  ? reduceCallControlsForMobile((_a = props.options) === null || _a === void 0 ? void 0 : _a.callControls)
@@ -26095,6 +26151,10 @@ const TransferPage = (props) => {
26095
26151
  }
26096
26152
  return 'transferor';
26097
26153
  }, [transferCall, transferTarget === null || transferTarget === void 0 ? void 0 : transferTarget.displayName]);
26154
+ /* @conditional-compile-remove(call-transfer) */
26155
+ React.useEffect(() => {
26156
+ setAnnouncerString(strings.transferPageNoticeString);
26157
+ }, [strings.transferPageNoticeString]);
26098
26158
  let transferTileParticipant = transferor;
26099
26159
  /* @conditional-compile-remove(call-transfer) */
26100
26160
  if (pageSubject === 'transferTarget') {
@@ -26107,16 +26167,19 @@ const TransferPage = (props) => {
26107
26167
  transferParticipantDisplayName =
26108
26168
  (_d = transferTarget === null || transferTarget === void 0 ? void 0 : transferTarget.displayName) !== null && _d !== void 0 ? _d : strings.transferPageUnknownTransferTargetDisplayName;
26109
26169
  }
26110
- return (React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings },
26111
- // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.
26112
- errorBarProps: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), callControlProps: {
26113
- options: callControlOptions,
26114
- increaseFlyoutItemSize: props.mobileView
26115
- }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React__default['default'].createElement(TransferTile, { userId: transferTileParticipant ? toFlatCommunicationIdentifier(transferTileParticipant === null || transferTileParticipant === void 0 ? void 0 : transferTileParticipant.identifier) : undefined, displayName: transferParticipantDisplayName, initialsName: transferParticipantDisplayName,
26116
- /* @conditional-compile-remove(call-transfer) */
26117
- statusText: pageSubject === 'transferTarget'
26118
- ? strings.transferPageTransferTargetText
26119
- : strings.transferPageTransferorText, onRenderAvatar: props.onRenderAvatar, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), dataUiId: 'transfer-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader }));
26170
+ return (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(pageContainer) },
26171
+ /* @conditional-compile-remove(call-transfer) */
26172
+ React__default['default'].createElement(Announcer$1, { announcementString: announcerString, ariaLive: "polite" }),
26173
+ React__default['default'].createElement(CallArrangement, { complianceBannerProps: { strings },
26174
+ // Ignore errors from before current call. This avoids old errors from showing up when a user re-joins a call.
26175
+ errorBarProps: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.errorBar) !== false && Object.assign(Object.assign({}, errorBarProps), { ignorePremountErrors: true }), callControlProps: {
26176
+ options: callControlOptions,
26177
+ increaseFlyoutItemSize: props.mobileView
26178
+ }, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, onRenderGalleryContent: () => (React__default['default'].createElement(TransferTile, { userId: transferTileParticipant ? toFlatCommunicationIdentifier(transferTileParticipant === null || transferTileParticipant === void 0 ? void 0 : transferTileParticipant.identifier) : undefined, displayName: transferParticipantDisplayName, initialsName: transferParticipantDisplayName,
26179
+ /* @conditional-compile-remove(call-transfer) */
26180
+ statusText: pageSubject === 'transferTarget'
26181
+ ? strings.transferPageTransferTargetText
26182
+ : strings.transferPageTransferorText, onRenderAvatar: props.onRenderAvatar, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData })), dataUiId: 'transfer-page', updateSidePaneRenderer: props.updateSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader })));
26120
26183
  };
26121
26184
  const TransferTile = (props) => {
26122
26185
  const { displayName, initialsName, userId, onRenderAvatar, onFetchAvatarPersonaData, statusText } = props;