@azure/communication-react 1.20.0-alpha-202410110016 → 1.20.0-alpha-202410120015

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 (42) hide show
  1. package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-B1i-YRoN.js → ChatMessageComponentAsRichTextEditBox-CP31U1Qi.js} +2 -2
  2. package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-B1i-YRoN.js.map → ChatMessageComponentAsRichTextEditBox-CP31U1Qi.js.map} +1 -1
  3. package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-D5odi2AE.js → RichTextSendBoxWrapper-Dx0WOAPN.js} +2 -2
  4. package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-D5odi2AE.js.map → RichTextSendBoxWrapper-Dx0WOAPN.js.map} +1 -1
  5. package/dist/dist-cjs/communication-react/{index-BYN3MK0Z.js → index-B9QcZlYP.js} +40 -26
  6. package/dist/dist-cjs/communication-react/index-B9QcZlYP.js.map +1 -0
  7. package/dist/dist-cjs/communication-react/index.js +1 -1
  8. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
  9. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
  10. package/dist/dist-esm/acs-ui-javascript-loaders/src/callCompositeLoader.d.ts +13 -5
  11. package/dist/dist-esm/acs-ui-javascript-loaders/src/callCompositeLoader.js +8 -6
  12. package/dist/dist-esm/acs-ui-javascript-loaders/src/callCompositeLoader.js.map +1 -1
  13. package/dist/dist-esm/acs-ui-javascript-loaders/src/callWithChatCompositeLoader.d.ts +14 -5
  14. package/dist/dist-esm/acs-ui-javascript-loaders/src/callWithChatCompositeLoader.js +10 -6
  15. package/dist/dist-esm/acs-ui-javascript-loaders/src/callWithChatCompositeLoader.js.map +1 -1
  16. package/dist/dist-esm/acs-ui-javascript-loaders/src/chatCompositeLoader.d.ts +10 -5
  17. package/dist/dist-esm/acs-ui-javascript-loaders/src/chatCompositeLoader.js +8 -5
  18. package/dist/dist-esm/acs-ui-javascript-loaders/src/chatCompositeLoader.js.map +1 -1
  19. package/dist/dist-esm/acs-ui-javascript-loaders/src/outboundCallCompositeLoader.d.ts +13 -5
  20. package/dist/dist-esm/acs-ui-javascript-loaders/src/outboundCallCompositeLoader.js +8 -6
  21. package/dist/dist-esm/acs-ui-javascript-loaders/src/outboundCallCompositeLoader.js.map +1 -1
  22. package/dist/dist-esm/react-components/src/components/LocalVideoTile.d.ts +1 -0
  23. package/dist/dist-esm/react-components/src/components/LocalVideoTile.js +5 -4
  24. package/dist/dist-esm/react-components/src/components/LocalVideoTile.js.map +1 -1
  25. package/dist/dist-esm/react-components/src/components/TroubleshootingGuideErrorBar.js +3 -3
  26. package/dist/dist-esm/react-components/src/components/TroubleshootingGuideErrorBar.js.map +1 -1
  27. package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js +10 -3
  28. package/dist/dist-esm/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.js.map +1 -1
  29. package/dist/dist-esm/react-components/src/components/VideoGallery.js +1 -1
  30. package/dist/dist-esm/react-components/src/components/VideoGallery.js.map +1 -1
  31. package/dist/dist-esm/react-components/src/components/styles/StreamMedia.styles.js +5 -2
  32. package/dist/dist-esm/react-components/src/components/styles/StreamMedia.styles.js.map +1 -1
  33. package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js +2 -1
  34. package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js.map +1 -1
  35. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/Prompt.d.ts +1 -0
  36. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/Prompt.js +1 -1
  37. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/Prompt.js.map +1 -1
  38. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/EndCall.js +8 -4
  39. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/EndCall.js.map +1 -1
  40. package/dist/dist-esm/react-composites/src/composites/localization/locales/en-US/strings.json +1 -1
  41. package/package.json +1 -1
  42. package/dist/dist-cjs/communication-react/index-BYN3MK0Z.js.map +0 -1
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-BYN3MK0Z.js');
3
+ var index = require('./index-B9QcZlYP.js');
4
4
  require('react');
5
5
  require('@fluentui/react');
6
6
  require('@fluentui/react-components');
@@ -2,5 +2,5 @@
2
2
  // Copyright (c) Microsoft Corporation.
3
3
  // Licensed under the MIT License.
4
4
  // GENERATED FILE. DO NOT EDIT MANUALLY.
5
- module.exports = '1.20.0-alpha-202410110016';
5
+ module.exports = '1.20.0-alpha-202410120015';
6
6
  //# sourceMappingURL=telemetryVersion.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.20.0-alpha-202410110016';\n"]}
1
+ {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.20.0-alpha-202410120015';\n"]}
@@ -1,19 +1,27 @@
1
1
  import { AzureCommunicationCallAdapterOptions, CallAdapter, CallAdapterLocator, CallCompositeOptions } from "../../react-composites/src/index-public";
2
2
  /**
3
3
  * Props for the OutboundCallComposite that you can use in your application.
4
- * @beta
4
+ *
5
+ * Contains two options bags:
6
+ * - adapterOptions: Options for the {@link AzureCommunicationCallAdapter}
7
+ * - callCompositeOptions: Options for the {@link CallComposite} {@link CallCompositeOptions}
8
+ *
9
+ * @public
5
10
  */
6
11
  export type CallCompositeLoaderProps = {
7
12
  userId: string;
8
13
  token: string;
9
14
  displayName: string;
10
15
  locator: CallAdapterLocator;
11
- options?: AzureCommunicationCallAdapterOptions;
16
+ callAdapterOptions?: AzureCommunicationCallAdapterOptions;
17
+ callCompositeOptions?: CallCompositeOptions;
12
18
  };
13
19
  /**
14
- * Loader function for the OutboundCallComposite that you can use in your application.
20
+ * Loader function for the CallComposite that you can use in your application. This
21
+ * function will load the CallComposite into the provided HTML element. The best use case for this
22
+ * is in a Node ui framework that is not React based.
15
23
  *
16
- * @beta
24
+ * @public
17
25
  */
18
- export declare const loadCallComposite: (adapterArgs: CallCompositeLoaderProps, htmlElement: HTMLElement | null, props?: CallCompositeOptions) => Promise<CallAdapter | undefined>;
26
+ export declare const loadCallComposite: (loaderArgs: CallCompositeLoaderProps, htmlElement: HTMLElement) => Promise<CallAdapter | undefined>;
19
27
  //# sourceMappingURL=callCompositeLoader.d.ts.map
@@ -19,25 +19,27 @@ import { fromFlatCommunicationIdentifier } from "../../acs-ui-common/src";
19
19
  import { CallComposite, createAzureCommunicationCallAdapter } from "../../react-composites/src/index-public";
20
20
  import { initializeIcons } from '@fluentui/react';
21
21
  /**
22
- * Loader function for the OutboundCallComposite that you can use in your application.
22
+ * Loader function for the CallComposite that you can use in your application. This
23
+ * function will load the CallComposite into the provided HTML element. The best use case for this
24
+ * is in a Node ui framework that is not React based.
23
25
  *
24
- * @beta
26
+ * @public
25
27
  */
26
- export const loadCallComposite = function (adapterArgs, htmlElement, props) {
28
+ export const loadCallComposite = function (loaderArgs, htmlElement) {
27
29
  return __awaiter(this, void 0, void 0, function* () {
28
30
  initializeIcons();
29
- const { userId, token, displayName, locator, options } = adapterArgs;
31
+ const { userId, token, displayName, locator, callAdapterOptions, callCompositeOptions } = loaderArgs;
30
32
  const adapter = yield createAzureCommunicationCallAdapter({
31
33
  userId: fromFlatCommunicationIdentifier(userId),
32
34
  displayName: displayName !== null && displayName !== void 0 ? displayName : 'anonymous',
33
35
  credential: new AzureCommunicationTokenCredential(token),
34
36
  locator,
35
- options
37
+ options: callAdapterOptions
36
38
  });
37
39
  if (!htmlElement) {
38
40
  throw new Error('Failed to find the root element');
39
41
  }
40
- createRoot(htmlElement).render(React.createElement(CallComposite, { options: props, adapter }, null));
42
+ createRoot(htmlElement).render(React.createElement(CallComposite, { options: callCompositeOptions, adapter }, null));
41
43
  return adapter;
42
44
  });
43
45
  };
@@ -1 +1 @@
1
- {"version":3,"file":"callCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/callCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iCAAiC,EAA+B,MAAM,6BAA6B,CAAC;AAC7G,OAAO,EAAE,+BAA+B,EAAE,gCAAgC;AAC1E,OAAO,EACL,aAAa,EACb,mCAAmC,EAKpC,gDAAmC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAclD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAC/B,WAAqC,EACrC,WAA+B,EAC/B,KAA4B;;QAE5B,eAAe,EAAE,CAAC;QAClB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,WAAW,CAAC;QAErE,MAAM,OAAO,GAAG,MAAM,mCAAmC,CAAC;YACxD,MAAM,EAAE,+BAA+B,CAAC,MAAM,CAAgC;YAC9E,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU,EAAE,IAAI,iCAAiC,CAAC,KAAK,CAAC;YACxD,OAAO;YACP,OAAO;SACR,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;QACtG,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { AzureCommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport { fromFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport {\n CallComposite,\n createAzureCommunicationCallAdapter,\n AzureCommunicationCallAdapterOptions,\n CallAdapter,\n CallAdapterLocator,\n CallCompositeOptions\n} from '@internal/react-composites';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the OutboundCallComposite that you can use in your application.\n * @beta\n */\nexport type CallCompositeLoaderProps = {\n userId: string;\n token: string;\n displayName: string;\n locator: CallAdapterLocator;\n options?: AzureCommunicationCallAdapterOptions;\n};\n\n/**\n * Loader function for the OutboundCallComposite that you can use in your application.\n *\n * @beta\n */\nexport const loadCallComposite = async function (\n adapterArgs: CallCompositeLoaderProps,\n htmlElement: HTMLElement | null,\n props?: CallCompositeOptions\n): Promise<CallAdapter | undefined> {\n initializeIcons();\n const { userId, token, displayName, locator, options } = adapterArgs;\n\n const adapter = await createAzureCommunicationCallAdapter({\n userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,\n displayName: displayName ?? 'anonymous',\n credential: new AzureCommunicationTokenCredential(token),\n locator,\n options\n });\n\n if (!htmlElement) {\n throw new Error('Failed to find the root element');\n }\n\n createRoot(htmlElement).render(React.createElement(CallComposite, { options: props, adapter }, null));\n return adapter;\n};\n"]}
1
+ {"version":3,"file":"callCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/callCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iCAAiC,EAA+B,MAAM,6BAA6B,CAAC;AAC7G,OAAO,EAAE,+BAA+B,EAAE,gCAAgC;AAC1E,OAAO,EACL,aAAa,EACb,mCAAmC,EAKpC,gDAAmC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAoBlD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAC/B,UAAoC,EACpC,WAAwB;;QAExB,eAAe,EAAE,CAAC;QAClB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,GAAG,UAAU,CAAC;QAErG,MAAM,OAAO,GAAG,MAAM,mCAAmC,CAAC;YACxD,MAAM,EAAE,+BAA+B,CAAC,MAAM,CAAgC;YAC9E,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU,EAAE,IAAI,iCAAiC,CAAC,KAAK,CAAC;YACxD,OAAO;YACP,OAAO,EAAE,kBAAkB;SAC5B,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;QACrH,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { AzureCommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport { fromFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport {\n CallComposite,\n createAzureCommunicationCallAdapter,\n AzureCommunicationCallAdapterOptions,\n CallAdapter,\n CallAdapterLocator,\n CallCompositeOptions\n} from '@internal/react-composites';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the OutboundCallComposite that you can use in your application.\n *\n * Contains two options bags:\n * - adapterOptions: Options for the {@link AzureCommunicationCallAdapter}\n * - callCompositeOptions: Options for the {@link CallComposite} {@link CallCompositeOptions}\n *\n * @public\n */\nexport type CallCompositeLoaderProps = {\n userId: string;\n token: string;\n displayName: string;\n locator: CallAdapterLocator;\n callAdapterOptions?: AzureCommunicationCallAdapterOptions;\n callCompositeOptions?: CallCompositeOptions;\n};\n\n/**\n * Loader function for the CallComposite that you can use in your application. This\n * function will load the CallComposite into the provided HTML element. The best use case for this\n * is in a Node ui framework that is not React based.\n *\n * @public\n */\nexport const loadCallComposite = async function (\n loaderArgs: CallCompositeLoaderProps,\n htmlElement: HTMLElement\n): Promise<CallAdapter | undefined> {\n initializeIcons();\n const { userId, token, displayName, locator, callAdapterOptions, callCompositeOptions } = loaderArgs;\n\n const adapter = await createAzureCommunicationCallAdapter({\n userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,\n displayName: displayName ?? 'anonymous',\n credential: new AzureCommunicationTokenCredential(token),\n locator,\n options: callAdapterOptions\n });\n\n if (!htmlElement) {\n throw new Error('Failed to find the root element');\n }\n\n createRoot(htmlElement).render(React.createElement(CallComposite, { options: callCompositeOptions, adapter }, null));\n return adapter;\n};\n"]}
@@ -1,7 +1,11 @@
1
- import { CallWithChatAdapter, CallAndChatLocator, CallWithChatCompositeOptions } from "../../react-composites/src/index-public";
1
+ import { CallWithChatAdapter, CallAndChatLocator, CallWithChatCompositeOptions, AzureCommunicationCallAdapterOptions } from "../../react-composites/src/index-public";
2
2
  /**
3
3
  * Props for the CallWithChatComposite that you can use in your application.
4
- * @beta
4
+ *
5
+ * Contains two options bags:
6
+ * - adapterOptions: Options for the {@link AzureCommunicationCallAdapterOptions}
7
+ * - callCompositeOptions: Options for the {@link CallWithChatComposite} {@link CallWithChatCompositeOptions}
8
+ * @public
5
9
  */
6
10
  export type CallWithChatCompositeLoaderProps = {
7
11
  userId: string;
@@ -9,10 +13,15 @@ export type CallWithChatCompositeLoaderProps = {
9
13
  displayName: string;
10
14
  endpoint: string;
11
15
  locator: CallAndChatLocator;
16
+ callAdapterOptions?: AzureCommunicationCallAdapterOptions;
17
+ callWithChatCompositeOptions?: CallWithChatCompositeOptions;
12
18
  };
13
19
  /**
14
- * Props for the CallWithChatComposite that you can use in your application.
15
- * @beta
20
+ * Props for the CallWithChatComposite that you can use in your application. This
21
+ * function will load the CallWithChatComposite into the provided HTML element.
22
+ * The best use case for this is in a Node UI framework that is not React based.
23
+ *
24
+ * @public
16
25
  */
17
- export declare const loadCallWithChatComposite: (args: CallWithChatCompositeLoaderProps, htmlElement: HTMLElement | null, props: CallWithChatCompositeOptions) => Promise<CallWithChatAdapter | undefined>;
26
+ export declare const loadCallWithChatComposite: (loaderArgs: CallWithChatCompositeLoaderProps, htmlElement: HTMLElement) => Promise<CallWithChatAdapter | undefined>;
18
27
  //# sourceMappingURL=callWithChatCompositeLoader.d.ts.map
@@ -19,24 +19,28 @@ import { fromFlatCommunicationIdentifier } from "../../acs-ui-common/src";
19
19
  import { createAzureCommunicationCallWithChatAdapter, CallWithChatComposite } from "../../react-composites/src/index-public";
20
20
  import { initializeIcons } from '@fluentui/react';
21
21
  /**
22
- * Props for the CallWithChatComposite that you can use in your application.
23
- * @beta
22
+ * Props for the CallWithChatComposite that you can use in your application. This
23
+ * function will load the CallWithChatComposite into the provided HTML element.
24
+ * The best use case for this is in a Node UI framework that is not React based.
25
+ *
26
+ * @public
24
27
  */
25
- export const loadCallWithChatComposite = function (args, htmlElement, props) {
28
+ export const loadCallWithChatComposite = function (loaderArgs, htmlElement) {
26
29
  return __awaiter(this, void 0, void 0, function* () {
27
30
  initializeIcons();
28
- const { userId, token, displayName, endpoint, locator } = args;
31
+ const { userId, token, displayName, endpoint, locator, callAdapterOptions, callWithChatCompositeOptions } = loaderArgs;
29
32
  const adapter = yield createAzureCommunicationCallWithChatAdapter({
30
33
  userId: fromFlatCommunicationIdentifier(userId),
31
34
  displayName: displayName !== null && displayName !== void 0 ? displayName : 'anonymous',
32
35
  credential: new AzureCommunicationTokenCredential(token),
33
36
  endpoint: endpoint,
34
- locator: locator
37
+ locator: locator,
38
+ callAdapterOptions
35
39
  });
36
40
  if (!htmlElement) {
37
41
  throw new Error('Failed to find the root element');
38
42
  }
39
- createRoot(htmlElement).render(React.createElement(CallWithChatComposite, { options: props, adapter }, null));
43
+ createRoot(htmlElement).render(React.createElement(CallWithChatComposite, { options: callWithChatCompositeOptions, adapter }, null));
40
44
  return adapter;
41
45
  });
42
46
  };
@@ -1 +1 @@
1
- {"version":3,"file":"callWithChatCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/callWithChatCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iCAAiC,EAA+B,MAAM,6BAA6B,CAAC;AAC7G,OAAO,EAAE,+BAA+B,EAAE,gCAAgC;AAC1E,OAAO,EAIL,2CAA2C,EAC3C,qBAAqB,EACtB,gDAAmC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAclD;;;GAGG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,UACvC,IAAsC,EACtC,WAA+B,EAC/B,KAAmC;;QAEnC,eAAe,EAAE,CAAC;QAClB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAC/D,MAAM,OAAO,GAAG,MAAM,2CAA2C,CAAC;YAChE,MAAM,EAAE,+BAA+B,CAAC,MAAM,CAAgC;YAC9E,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU,EAAE,IAAI,iCAAiC,CAAC,KAAK,CAAC;YACxD,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,OAAO;SACjB,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,qBAAqB,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;QAC9G,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { AzureCommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport { fromFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport {\n CallWithChatAdapter,\n CallAndChatLocator,\n CallWithChatCompositeOptions,\n createAzureCommunicationCallWithChatAdapter,\n CallWithChatComposite\n} from '@internal/react-composites';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the CallWithChatComposite that you can use in your application.\n * @beta\n */\nexport type CallWithChatCompositeLoaderProps = {\n userId: string;\n token: string;\n displayName: string;\n endpoint: string;\n locator: CallAndChatLocator;\n};\n\n/**\n * Props for the CallWithChatComposite that you can use in your application.\n * @beta\n */\nexport const loadCallWithChatComposite = async function (\n args: CallWithChatCompositeLoaderProps,\n htmlElement: HTMLElement | null,\n props: CallWithChatCompositeOptions\n): Promise<CallWithChatAdapter | undefined> {\n initializeIcons();\n const { userId, token, displayName, endpoint, locator } = args;\n const adapter = await createAzureCommunicationCallWithChatAdapter({\n userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,\n displayName: displayName ?? 'anonymous',\n credential: new AzureCommunicationTokenCredential(token),\n endpoint: endpoint,\n locator: locator\n });\n\n if (!htmlElement) {\n throw new Error('Failed to find the root element');\n }\n\n createRoot(htmlElement).render(React.createElement(CallWithChatComposite, { options: props, adapter }, null));\n return adapter;\n};\n"]}
1
+ {"version":3,"file":"callWithChatCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/callWithChatCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iCAAiC,EAA+B,MAAM,6BAA6B,CAAC;AAC7G,OAAO,EAAE,+BAA+B,EAAE,gCAAgC;AAC1E,OAAO,EAIL,2CAA2C,EAC3C,qBAAqB,EAEtB,gDAAmC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAoBlD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,UACvC,UAA4C,EAC5C,WAAwB;;QAExB,eAAe,EAAE,CAAC;QAClB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,kBAAkB,EAAE,4BAA4B,EAAE,GACvG,UAAU,CAAC;QACb,MAAM,OAAO,GAAG,MAAM,2CAA2C,CAAC;YAChE,MAAM,EAAE,+BAA+B,CAAC,MAAM,CAAgC;YAC9E,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU,EAAE,IAAI,iCAAiC,CAAC,KAAK,CAAC;YACxD,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,OAAO;YAChB,kBAAkB;SACnB,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAC5B,KAAK,CAAC,aAAa,CAAC,qBAAqB,EAAE,EAAE,OAAO,EAAE,4BAA4B,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,CACrG,CAAC;QACF,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { AzureCommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport { fromFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport {\n CallWithChatAdapter,\n CallAndChatLocator,\n CallWithChatCompositeOptions,\n createAzureCommunicationCallWithChatAdapter,\n CallWithChatComposite,\n AzureCommunicationCallAdapterOptions\n} from '@internal/react-composites';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the CallWithChatComposite that you can use in your application.\n *\n * Contains two options bags:\n * - adapterOptions: Options for the {@link AzureCommunicationCallAdapterOptions}\n * - callCompositeOptions: Options for the {@link CallWithChatComposite} {@link CallWithChatCompositeOptions}\n * @public\n */\nexport type CallWithChatCompositeLoaderProps = {\n userId: string;\n token: string;\n displayName: string;\n endpoint: string;\n locator: CallAndChatLocator;\n callAdapterOptions?: AzureCommunicationCallAdapterOptions;\n callWithChatCompositeOptions?: CallWithChatCompositeOptions;\n};\n\n/**\n * Props for the CallWithChatComposite that you can use in your application. This\n * function will load the CallWithChatComposite into the provided HTML element.\n * The best use case for this is in a Node UI framework that is not React based.\n *\n * @public\n */\nexport const loadCallWithChatComposite = async function (\n loaderArgs: CallWithChatCompositeLoaderProps,\n htmlElement: HTMLElement\n): Promise<CallWithChatAdapter | undefined> {\n initializeIcons();\n const { userId, token, displayName, endpoint, locator, callAdapterOptions, callWithChatCompositeOptions } =\n loaderArgs;\n const adapter = await createAzureCommunicationCallWithChatAdapter({\n userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,\n displayName: displayName ?? 'anonymous',\n credential: new AzureCommunicationTokenCredential(token),\n endpoint: endpoint,\n locator: locator,\n callAdapterOptions\n });\n\n if (!htmlElement) {\n throw new Error('Failed to find the root element');\n }\n\n createRoot(htmlElement).render(\n React.createElement(CallWithChatComposite, { options: callWithChatCompositeOptions, adapter }, null)\n );\n return adapter;\n};\n"]}
@@ -1,7 +1,8 @@
1
1
  import { ChatAdapter, ChatCompositeOptions } from "../../react-composites/src/index-public";
2
2
  /**
3
- * Props for the ChatComposite that you can use in your application.
4
- * @beta
3
+ * Props for the ChatComposite that you can use in your application. Contains the
4
+ * options for the {@link ChatComposite} {@link ChatCompositeOptions}.
5
+ * @public
5
6
  */
6
7
  export type ChatCompositeLoaderProps = {
7
8
  userId: string;
@@ -9,10 +10,14 @@ export type ChatCompositeLoaderProps = {
9
10
  displayName?: string;
10
11
  endpoint: string;
11
12
  threadId: string;
13
+ chatCompositeOptions?: ChatCompositeOptions;
12
14
  };
13
15
  /**
14
- * Loader function for the ChatComposite that you can use in your application.
15
- * @beta
16
+ * Loader function for the ChatComposite that you can use in your application. This
17
+ * function will load the ChatComposite into the provided HTML element.
18
+ * The best use case for this is in a Node UI framework that is not React based.
19
+ *
20
+ * @public
16
21
  */
17
- export declare const loadChatComposite: (args: ChatCompositeLoaderProps, htmlElement: HTMLElement | null, props: ChatCompositeOptions) => Promise<ChatAdapter | undefined>;
22
+ export declare const loadChatComposite: (loaderArgs: ChatCompositeLoaderProps, htmlElement: HTMLElement) => Promise<ChatAdapter | undefined>;
18
23
  //# sourceMappingURL=chatCompositeLoader.d.ts.map
@@ -19,13 +19,16 @@ import { ChatComposite, createAzureCommunicationChatAdapter } from "../../react-
19
19
  import { fromFlatCommunicationIdentifier } from "../../acs-ui-common/src";
20
20
  import { initializeIcons } from '@fluentui/react';
21
21
  /**
22
- * Loader function for the ChatComposite that you can use in your application.
23
- * @beta
22
+ * Loader function for the ChatComposite that you can use in your application. This
23
+ * function will load the ChatComposite into the provided HTML element.
24
+ * The best use case for this is in a Node UI framework that is not React based.
25
+ *
26
+ * @public
24
27
  */
25
- export const loadChatComposite = function (args, htmlElement, props) {
28
+ export const loadChatComposite = function (loaderArgs, htmlElement) {
26
29
  return __awaiter(this, void 0, void 0, function* () {
27
30
  initializeIcons();
28
- const { userId, token, endpoint, threadId, displayName } = args;
31
+ const { userId, token, endpoint, threadId, displayName, chatCompositeOptions } = loaderArgs;
29
32
  const adapter = yield createAzureCommunicationChatAdapter({
30
33
  endpoint,
31
34
  userId: fromFlatCommunicationIdentifier(userId),
@@ -36,7 +39,7 @@ export const loadChatComposite = function (args, htmlElement, props) {
36
39
  if (!htmlElement) {
37
40
  throw new Error('Failed to find the root element');
38
41
  }
39
- createRoot(htmlElement).render(React.createElement(ChatComposite, { options: props, adapter }, null));
42
+ createRoot(htmlElement).render(React.createElement(ChatComposite, { options: chatCompositeOptions, adapter }, null));
40
43
  return adapter;
41
44
  });
42
45
  };
@@ -1 +1 @@
1
- {"version":3,"file":"chatCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/chatCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iCAAiC,EAA+B,MAAM,6BAA6B,CAAC;AAC7G,OAAO,EAEL,aAAa,EAEb,mCAAmC,EACpC,gDAAmC;AACpC,OAAO,EAAE,+BAA+B,EAAE,gCAAgC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAclD;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAC/B,IAA8B,EAC9B,WAA+B,EAC/B,KAA2B;;QAE3B,eAAe,EAAE,CAAC;QAClB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;QAChE,MAAM,OAAO,GAAG,MAAM,mCAAmC,CAAC;YACxD,QAAQ;YACR,MAAM,EAAE,+BAA+B,CAAC,MAAM,CAAgC;YAC9E,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU,EAAE,IAAI,iCAAiC,CAAC,KAAK,CAAC;YACxD,QAAQ;SACT,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;QACtG,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { AzureCommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport {\n ChatAdapter,\n ChatComposite,\n ChatCompositeOptions,\n createAzureCommunicationChatAdapter\n} from '@internal/react-composites';\nimport { fromFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the ChatComposite that you can use in your application.\n * @beta\n */\nexport type ChatCompositeLoaderProps = {\n userId: string;\n token: string;\n displayName?: string;\n endpoint: string;\n threadId: string;\n};\n\n/**\n * Loader function for the ChatComposite that you can use in your application.\n * @beta\n */\nexport const loadChatComposite = async function (\n args: ChatCompositeLoaderProps,\n htmlElement: HTMLElement | null,\n props: ChatCompositeOptions\n): Promise<ChatAdapter | undefined> {\n initializeIcons();\n const { userId, token, endpoint, threadId, displayName } = args;\n const adapter = await createAzureCommunicationChatAdapter({\n endpoint,\n userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,\n displayName: displayName ?? 'anonymous',\n credential: new AzureCommunicationTokenCredential(token),\n threadId\n });\n\n if (!htmlElement) {\n throw new Error('Failed to find the root element');\n }\n\n createRoot(htmlElement).render(React.createElement(ChatComposite, { options: props, adapter }, null));\n return adapter;\n};\n"]}
1
+ {"version":3,"file":"chatCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/chatCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iCAAiC,EAA+B,MAAM,6BAA6B,CAAC;AAC7G,OAAO,EAEL,aAAa,EAEb,mCAAmC,EACpC,gDAAmC;AACpC,OAAO,EAAE,+BAA+B,EAAE,gCAAgC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAgBlD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAC/B,UAAoC,EACpC,WAAwB;;QAExB,eAAe,EAAE,CAAC;QAClB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,oBAAoB,EAAE,GAAG,UAAU,CAAC;QAC5F,MAAM,OAAO,GAAG,MAAM,mCAAmC,CAAC;YACxD,QAAQ;YACR,MAAM,EAAE,+BAA+B,CAAC,MAAM,CAAgC;YAC9E,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU,EAAE,IAAI,iCAAiC,CAAC,KAAK,CAAC;YACxD,QAAQ;SACT,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;QACrH,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { AzureCommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport {\n ChatAdapter,\n ChatComposite,\n ChatCompositeOptions,\n createAzureCommunicationChatAdapter\n} from '@internal/react-composites';\nimport { fromFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the ChatComposite that you can use in your application. Contains the\n * options for the {@link ChatComposite} {@link ChatCompositeOptions}.\n * @public\n */\nexport type ChatCompositeLoaderProps = {\n userId: string;\n token: string;\n displayName?: string;\n endpoint: string;\n threadId: string;\n chatCompositeOptions?: ChatCompositeOptions;\n};\n\n/**\n * Loader function for the ChatComposite that you can use in your application. This\n * function will load the ChatComposite into the provided HTML element.\n * The best use case for this is in a Node UI framework that is not React based.\n *\n * @public\n */\nexport const loadChatComposite = async function (\n loaderArgs: ChatCompositeLoaderProps,\n htmlElement: HTMLElement\n): Promise<ChatAdapter | undefined> {\n initializeIcons();\n const { userId, token, endpoint, threadId, displayName, chatCompositeOptions } = loaderArgs;\n const adapter = await createAzureCommunicationChatAdapter({\n endpoint,\n userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,\n displayName: displayName ?? 'anonymous',\n credential: new AzureCommunicationTokenCredential(token),\n threadId\n });\n\n if (!htmlElement) {\n throw new Error('Failed to find the root element');\n }\n\n createRoot(htmlElement).render(React.createElement(ChatComposite, { options: chatCompositeOptions, adapter }, null));\n return adapter;\n};\n"]}
@@ -1,19 +1,27 @@
1
1
  import { CallCompositeOptions, StartCallIdentifier, AzureCommunicationCallAdapterOptions, CallAdapter } from "../../react-composites/src/index-public";
2
2
  /**
3
3
  * Props for the OutboundCallComposite that you can use in your application.
4
- * @beta
4
+ *
5
+ * Contains two options bags:
6
+ * - adapterOptions: Options for the {@link AzureCommunicationCallAdapter}
7
+ * - callCompositeOptions: Options for the {@link CallComposite} {@link CallCompositeOptions}
8
+ *
9
+ * @public
5
10
  */
6
11
  export type OutboundCallCompositeLoaderProps = {
7
12
  userId: string;
8
13
  token: string;
9
14
  displayName: string;
10
15
  targetCallees: string[] | StartCallIdentifier[];
11
- options?: AzureCommunicationCallAdapterOptions;
16
+ callAdapterOptions?: AzureCommunicationCallAdapterOptions;
17
+ callCompositeOptions?: CallCompositeOptions;
12
18
  };
13
19
  /**
14
- * Loader function for the OutboundCallComposite that you can use in your application.
20
+ * Loader function for the OutboundCallComposite that you can use in your application. This
21
+ * function will load the CallComposite into the provided HTML element to make outbound calls.
22
+ * The best use case for this is in a Node UI framework that is not React based.
15
23
  *
16
- * @beta
24
+ * @public
17
25
  */
18
- export declare const loadOutboundCallComposite: (adapterArgs: OutboundCallCompositeLoaderProps, htmlElement: HTMLElement | null, props?: CallCompositeOptions) => Promise<CallAdapter | undefined>;
26
+ export declare const loadOutboundCallComposite: (loaderArgs: OutboundCallCompositeLoaderProps, htmlElement: HTMLElement) => Promise<CallAdapter | undefined>;
19
27
  //# sourceMappingURL=outboundCallCompositeLoader.d.ts.map
@@ -19,15 +19,17 @@ import { fromFlatCommunicationIdentifier } from "../../acs-ui-common/src";
19
19
  import { CallComposite, createAzureCommunicationCallAdapter } from "../../react-composites/src/index-public";
20
20
  import { initializeIcons } from '@fluentui/react';
21
21
  /**
22
- * Loader function for the OutboundCallComposite that you can use in your application.
22
+ * Loader function for the OutboundCallComposite that you can use in your application. This
23
+ * function will load the CallComposite into the provided HTML element to make outbound calls.
24
+ * The best use case for this is in a Node UI framework that is not React based.
23
25
  *
24
- * @beta
26
+ * @public
25
27
  */
26
- export const loadOutboundCallComposite = function (adapterArgs, htmlElement, props) {
28
+ export const loadOutboundCallComposite = function (loaderArgs, htmlElement) {
27
29
  return __awaiter(this, void 0, void 0, function* () {
28
30
  var _a;
29
31
  initializeIcons();
30
- const { userId, token, displayName, targetCallees, options } = adapterArgs;
32
+ const { userId, token, displayName, targetCallees, callAdapterOptions, callCompositeOptions } = loaderArgs;
31
33
  const formattedTargetCallees = typeof targetCallees[0] === 'string'
32
34
  ? targetCallees.map((callee) => {
33
35
  return fromFlatCommunicationIdentifier(callee);
@@ -38,12 +40,12 @@ export const loadOutboundCallComposite = function (adapterArgs, htmlElement, pro
38
40
  displayName: displayName !== null && displayName !== void 0 ? displayName : 'anonymous',
39
41
  credential: new AzureCommunicationTokenCredential(token),
40
42
  targetCallees: (_a = formattedTargetCallees) !== null && _a !== void 0 ? _a : targetCallees,
41
- options
43
+ options: callAdapterOptions
42
44
  });
43
45
  if (!htmlElement) {
44
46
  throw new Error('Failed to find the root element');
45
47
  }
46
- createRoot(htmlElement).render(React.createElement(CallComposite, { options: props, adapter }, null));
48
+ createRoot(htmlElement).render(React.createElement(CallComposite, { options: callCompositeOptions, adapter }, null));
47
49
  return adapter;
48
50
  });
49
51
  };
@@ -1 +1 @@
1
- {"version":3,"file":"outboundCallCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/outboundCallCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iCAAiC,EAA+B,MAAM,6BAA6B,CAAC;AAC7G,OAAO,EAAE,+BAA+B,EAAE,gCAAgC;AAC1E,OAAO,EACL,aAAa,EACb,mCAAmC,EAKpC,gDAAmC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAclD;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,UACvC,WAA6C,EAC7C,WAA+B,EAC/B,KAA4B;;;QAE5B,eAAe,EAAE,CAAC;QAClB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,WAAW,CAAC;QAC3E,MAAM,sBAAsB,GAC1B,OAAO,aAAa,CAAC,CAAC,CAAC,KAAK,QAAQ;YAClC,CAAC,CAAE,aAA0B,CAAC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE;gBACjD,OAAO,+BAA+B,CAAC,MAAM,CAAC,CAAC;YACjD,CAAC,CAAC;YACJ,CAAC,CAAC,SAAS,CAAC;QAEhB,MAAM,OAAO,GAAG,MAAM,mCAAmC,CAAC;YACxD,MAAM,EAAE,+BAA+B,CAAC,MAAM,CAAgC;YAC9E,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU,EAAE,IAAI,iCAAiC,CAAC,KAAK,CAAC;YACxD,aAAa,EAAE,MAAC,sBAAgD,mCAAK,aAAuC;YAC5G,OAAO;SACR,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;QACtG,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { AzureCommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport { fromFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport {\n CallComposite,\n createAzureCommunicationCallAdapter,\n CallCompositeOptions,\n StartCallIdentifier,\n AzureCommunicationCallAdapterOptions,\n CallAdapter\n} from '@internal/react-composites';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the OutboundCallComposite that you can use in your application.\n * @beta\n */\nexport type OutboundCallCompositeLoaderProps = {\n userId: string;\n token: string;\n displayName: string;\n targetCallees: string[] | StartCallIdentifier[];\n options?: AzureCommunicationCallAdapterOptions;\n};\n\n/**\n * Loader function for the OutboundCallComposite that you can use in your application.\n *\n * @beta\n */\nexport const loadOutboundCallComposite = async function (\n adapterArgs: OutboundCallCompositeLoaderProps,\n htmlElement: HTMLElement | null,\n props?: CallCompositeOptions\n): Promise<CallAdapter | undefined> {\n initializeIcons();\n const { userId, token, displayName, targetCallees, options } = adapterArgs;\n const formattedTargetCallees =\n typeof targetCallees[0] === 'string'\n ? (targetCallees as string[]).map((callee: string) => {\n return fromFlatCommunicationIdentifier(callee);\n })\n : undefined;\n\n const adapter = await createAzureCommunicationCallAdapter({\n userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,\n displayName: displayName ?? 'anonymous',\n credential: new AzureCommunicationTokenCredential(token),\n targetCallees: (formattedTargetCallees as StartCallIdentifier[]) ?? (targetCallees as StartCallIdentifier[]),\n options\n });\n\n if (!htmlElement) {\n throw new Error('Failed to find the root element');\n }\n\n createRoot(htmlElement).render(React.createElement(CallComposite, { options: props, adapter }, null));\n return adapter;\n};\n"]}
1
+ {"version":3,"file":"outboundCallCompositeLoader.js","sourceRoot":"","sources":["../../../../../acs-ui-javascript-loaders/src/outboundCallCompositeLoader.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC;AACnC,iBAAiB,CAAC,YAAY,CAAC,CAAC;AAEhC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,iCAAiC,EAA+B,MAAM,6BAA6B,CAAC;AAC7G,OAAO,EAAE,+BAA+B,EAAE,gCAAgC;AAC1E,OAAO,EACL,aAAa,EACb,mCAAmC,EAKpC,gDAAmC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAoBlD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,UACvC,UAA4C,EAC5C,WAAwB;;;QAExB,eAAe,EAAE,CAAC;QAClB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,GAAG,UAAU,CAAC;QAC3G,MAAM,sBAAsB,GAC1B,OAAO,aAAa,CAAC,CAAC,CAAC,KAAK,QAAQ;YAClC,CAAC,CAAE,aAA0B,CAAC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE;gBACjD,OAAO,+BAA+B,CAAC,MAAM,CAAC,CAAC;YACjD,CAAC,CAAC;YACJ,CAAC,CAAC,SAAS,CAAC;QAEhB,MAAM,OAAO,GAAG,MAAM,mCAAmC,CAAC;YACxD,MAAM,EAAE,+BAA+B,CAAC,MAAM,CAAgC;YAC9E,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,WAAW;YACvC,UAAU,EAAE,IAAI,iCAAiC,CAAC,KAAK,CAAC;YACxD,aAAa,EAAE,MAAC,sBAAgD,mCAAK,aAAuC;YAC5G,OAAO,EAAE,kBAAkB;SAC5B,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,EAAE,CAAC;YACjB,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;QACrD,CAAC;QAED,UAAU,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,oBAAoB,EAAE,OAAO,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;QACrH,OAAO,OAAO,CAAC;IACjB,CAAC;CAAA,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { parseReactVersion } from './utils';\n\nconst reactVersion = React.version;\nparseReactVersion(reactVersion);\n\nimport { createRoot } from 'react-dom/client';\nimport { AzureCommunicationTokenCredential, CommunicationUserIdentifier } from '@azure/communication-common';\nimport { fromFlatCommunicationIdentifier } from '@internal/acs-ui-common';\nimport {\n CallComposite,\n createAzureCommunicationCallAdapter,\n CallCompositeOptions,\n StartCallIdentifier,\n AzureCommunicationCallAdapterOptions,\n CallAdapter\n} from '@internal/react-composites';\nimport { initializeIcons } from '@fluentui/react';\n\n/**\n * Props for the OutboundCallComposite that you can use in your application.\n *\n * Contains two options bags:\n * - adapterOptions: Options for the {@link AzureCommunicationCallAdapter}\n * - callCompositeOptions: Options for the {@link CallComposite} {@link CallCompositeOptions}\n *\n * @public\n */\nexport type OutboundCallCompositeLoaderProps = {\n userId: string;\n token: string;\n displayName: string;\n targetCallees: string[] | StartCallIdentifier[];\n callAdapterOptions?: AzureCommunicationCallAdapterOptions;\n callCompositeOptions?: CallCompositeOptions;\n};\n\n/**\n * Loader function for the OutboundCallComposite that you can use in your application. This\n * function will load the CallComposite into the provided HTML element to make outbound calls.\n * The best use case for this is in a Node UI framework that is not React based.\n *\n * @public\n */\nexport const loadOutboundCallComposite = async function (\n loaderArgs: OutboundCallCompositeLoaderProps,\n htmlElement: HTMLElement\n): Promise<CallAdapter | undefined> {\n initializeIcons();\n const { userId, token, displayName, targetCallees, callAdapterOptions, callCompositeOptions } = loaderArgs;\n const formattedTargetCallees =\n typeof targetCallees[0] === 'string'\n ? (targetCallees as string[]).map((callee: string) => {\n return fromFlatCommunicationIdentifier(callee);\n })\n : undefined;\n\n const adapter = await createAzureCommunicationCallAdapter({\n userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,\n displayName: displayName ?? 'anonymous',\n credential: new AzureCommunicationTokenCredential(token),\n targetCallees: (formattedTargetCallees as StartCallIdentifier[]) ?? (targetCallees as StartCallIdentifier[]),\n options: callAdapterOptions\n });\n\n if (!htmlElement) {\n throw new Error('Failed to find the root element');\n }\n\n createRoot(htmlElement).render(React.createElement(CallComposite, { options: callCompositeOptions, adapter }, null));\n return adapter;\n};\n"]}
@@ -43,5 +43,6 @@ export declare const _LocalVideoTile: React.MemoExoticComponent<(props: {
43
43
  strings?: VideoGalleryStrings;
44
44
  reactionResources?: ReactionResources;
45
45
  participantsCount?: number;
46
+ isScreenSharingOn?: boolean;
46
47
  }) => React.JSX.Element>;
47
48
  //# sourceMappingURL=LocalVideoTile.d.ts.map
@@ -21,7 +21,7 @@ import { videoContainerStyles, overlayStyles, overlayStylesTransparent, loadSpin
21
21
  * @internal
22
22
  */
23
23
  export const _LocalVideoTile = React.memo((props) => {
24
- const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, alwaysShowLabelBackground, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, raisedHand, reaction, isSpotlighted, spotlightedParticipantUserIds, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, menuKind, strings, reactionResources } = props;
24
+ const { isAvailable, isMuted, onCreateLocalStreamView, onDisposeLocalStreamView, localVideoViewOptions, renderElement, userId, showLabel, alwaysShowLabelBackground, displayName, initialsName, onRenderAvatar, showMuteIndicator, styles, showCameraSwitcherInLocalPreview, localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel, localVideoSelectedDescription, raisedHand, reaction, isSpotlighted, spotlightedParticipantUserIds, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, menuKind, strings, reactionResources, isScreenSharingOn } = props;
25
25
  const theme = useTheme();
26
26
  const localVideoStreamProps = useMemo(() => ({
27
27
  isMirrored: localVideoViewOptions === null || localVideoViewOptions === void 0 ? void 0 : localVideoViewOptions.isMirrored,
@@ -86,7 +86,7 @@ export const _LocalVideoTile = React.memo((props) => {
86
86
  return (React.createElement(React.Fragment, null,
87
87
  React.createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
88
88
  React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true }),
89
- props.participantsCount === 1 && (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, overlayStyles()) },
89
+ props.participantsCount === 1 && !isScreenSharingOn && (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, overlayStyles()) },
90
90
  React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, ariaLive: "assertive", labelPosition: "bottom", styles: loadSpinnerStyles(theme, true) })))));
91
91
  }, [
92
92
  localVideoCameraCycleButtonProps,
@@ -96,7 +96,8 @@ export const _LocalVideoTile = React.memo((props) => {
96
96
  showCameraSwitcherInLocalPreview,
97
97
  props.participantsCount,
98
98
  strings === null || strings === void 0 ? void 0 : strings.waitingScreenText,
99
- theme
99
+ theme,
100
+ isScreenSharingOn
100
101
  ]);
101
102
  const videoTileOverlay = useMemo(() => {
102
103
  const reactionOverlay = reactionResources !== undefined ? (React.createElement(MeetingReactionOverlay, { overlayMode: "grid-tiles", reaction: reaction, reactionResources: reactionResources })) : undefined;
@@ -107,7 +108,7 @@ export const _LocalVideoTile = React.memo((props) => {
107
108
  React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, ariaLive: "assertive", labelPosition: "bottom", styles: loadSpinnerStyles(theme, false) })));
108
109
  }, [strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, theme]);
109
110
  return (React.createElement(Stack, { "data-ui-id": "local-video-tile", className: mergeStyles({ width: '100%', height: '100%' }), onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
110
- React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, alwaysShowLabelBackground: alwaysShowLabelBackground, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: props.participantsCount === 1 ? onRenderAvatarOneParticipant : onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), overlay: videoTileOverlay }), drawerMenuItemProps.length > 0 && (React.createElement(Layer, { hostId: props.drawerMenuHostId },
111
+ React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, alwaysShowLabelBackground: alwaysShowLabelBackground, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: props.participantsCount === 1 && !isScreenSharingOn ? onRenderAvatarOneParticipant : onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), overlay: videoTileOverlay }), drawerMenuItemProps.length > 0 && (React.createElement(Layer, { hostId: props.drawerMenuHostId },
111
112
  React.createElement(Stack, { styles: drawerMenuWrapperStyles },
112
113
  React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps })))))));
113
114
  });
@@ -1 +1 @@
1
- {"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Spinner } from '@fluentui/react';\nimport { concatStyleSets, IContextualMenuProps, Layer } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport {\n useLocalVideoStreamLifecycleMaintainer,\n LocalVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\nimport { RaisedHand } from '../types';\nimport { useTheme } from '../theming';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n videoContainerStyles,\n overlayStyles,\n overlayStylesTransparent,\n loadSpinnerStyles\n} from './styles/VideoTile.styles';\n\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo(\n (props: {\n userId?: string;\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n onDisposeLocalStreamView?: () => void;\n isAvailable?: boolean;\n isMuted?: boolean;\n renderElement?: HTMLElement;\n displayName?: string;\n initialsName?: string;\n localVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showLabel: boolean;\n alwaysShowLabelBackground?: boolean;\n showMuteIndicator?: boolean;\n showCameraSwitcherInLocalPreview?: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n styles?: VideoTileStylesProps;\n personaMinSize?: number;\n raisedHand?: RaisedHand;\n reaction?: Reaction;\n spotlightedParticipantUserIds?: string[];\n isSpotlighted?: boolean;\n onStartSpotlight?: () => void;\n onStopSpotlight?: () => void;\n maxParticipantsToSpotlight?: number;\n menuKind?: 'contextual' | 'drawer';\n drawerMenuHostId?: string;\n strings?: VideoGalleryStrings;\n reactionResources?: ReactionResources;\n participantsCount?: number;\n }) => {\n const {\n isAvailable,\n isMuted,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n localVideoViewOptions,\n renderElement,\n userId,\n showLabel,\n alwaysShowLabelBackground,\n displayName,\n initialsName,\n onRenderAvatar,\n showMuteIndicator,\n styles,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n raisedHand,\n reaction,\n isSpotlighted,\n spotlightedParticipantUserIds,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n menuKind,\n strings,\n reactionResources\n } = props;\n\n const theme = useTheme();\n\n const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: localVideoViewOptions?.isMirrored,\n isStreamAvailable: isAvailable,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElementExists: !!renderElement,\n scalingMode: localVideoViewOptions?.scalingMode\n }),\n [\n isAvailable,\n localVideoViewOptions?.isMirrored,\n localVideoViewOptions?.scalingMode,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElement\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: { userId: userId ?? '' },\n strings: { ...strings },\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId: userId\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual' || !contextualMenuProps) {\n return {};\n }\n return {\n contextualMenu: contextualMenuProps\n };\n return {};\n }, [contextualMenuProps, menuKind]);\n\n const videoTileStyles = useMemo(() => {\n if (isSpotlighted) {\n return concatStyleSets(\n {\n root: {\n outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,\n outlineOffset: '-0.25rem'\n }\n },\n styles\n );\n }\n return styles;\n }, [isSpotlighted, theme.palette.neutralTertiaryAlt, styles]);\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement || !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <>\n <FloatingLocalCameraCycleButton\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={localVideoSelectedDescription}\n />\n <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n {props.participantsCount === 1 && (\n <Stack className={mergeStyles(videoContainerStyles, overlayStyles())}>\n <Spinner\n label={strings?.waitingScreenText}\n ariaLive=\"assertive\"\n labelPosition=\"bottom\"\n styles={loadSpinnerStyles(theme, true)}\n />\n </Stack>\n )}\n </>\n );\n }, [\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n renderElement,\n showCameraSwitcherInLocalPreview,\n props.participantsCount,\n strings?.waitingScreenText,\n theme\n ]);\n\n const videoTileOverlay = useMemo(() => {\n const reactionOverlay =\n reactionResources !== undefined ? (\n <MeetingReactionOverlay overlayMode=\"grid-tiles\" reaction={reaction} reactionResources={reactionResources} />\n ) : undefined;\n return reactionOverlay;\n }, [reaction, reactionResources]);\n\n const onRenderAvatarOneParticipant = useCallback(() => {\n return (\n <Stack className={mergeStyles(videoContainerStyles, overlayStylesTransparent())}>\n <Spinner\n label={strings?.waitingScreenText}\n ariaLive=\"assertive\"\n labelPosition=\"bottom\"\n styles={loadSpinnerStyles(theme, false)}\n />\n </Stack>\n );\n }, [strings?.waitingScreenText, theme]);\n\n return (\n <Stack\n data-ui-id=\"local-video-tile\"\n className={mergeStyles({ width: '100%', height: '100%' })}\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n >\n <VideoTile\n key={userId ?? 'local-video-tile'}\n userId={userId}\n renderElement={renderVideoStreamElement}\n showLabel={showLabel}\n alwaysShowLabelBackground={alwaysShowLabelBackground}\n displayName={displayName}\n initialsName={initialsName}\n styles={videoTileStyles}\n onRenderPlaceholder={props.participantsCount === 1 ? onRenderAvatarOneParticipant : onRenderAvatar}\n isMuted={isMuted}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n raisedHand={raisedHand}\n isSpotlighted={isSpotlighted}\n {...videoTileContextualMenuProps}\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n overlay={videoTileOverlay}\n >\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} />\n </Stack>\n </Layer>\n )}\n </VideoTile>\n </Stack>\n );\n }\n);\n\nconst FloatingLocalCameraCycleButton = (props: {\n showCameraSwitcherInLocalPreview: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n}): JSX.Element => {\n const {\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription\n } = props;\n const ariaDescription =\n localVideoCameraCycleButtonProps?.selectedCamera &&\n localVideoSelectedDescription &&\n _formatString(localVideoSelectedDescription, {\n cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n });\n return (\n <Stack horizontalAlign=\"end\">\n {showCameraSwitcherInLocalPreview &&\n localVideoCameraCycleButtonProps?.cameras !== undefined &&\n localVideoCameraCycleButtonProps?.selectedCamera !== undefined &&\n localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && (\n <LocalVideoCameraCycleButton\n cameras={localVideoCameraCycleButtonProps.cameras}\n selectedCamera={localVideoCameraCycleButtonProps.selectedCamera}\n onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera}\n label={localVideoCameraSwitcherLabel}\n ariaDescription={ariaDescription}\n />\n )}\n </Stack>\n );\n};\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}
1
+ {"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAwB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,mCAAgC;AACxD,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAiB,WAAW,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,2BAA2B,EAAoC,MAAM,0BAA0B,CAAC;AACzG,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,sCAAsC,EAEvC,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAwB,MAAM,aAAa,CAAC;AAE9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,+BAA+B,EAAE,MAAM,gDAAgD,CAAC;AAEjG,OAAO,EAAE,WAAW,EAAwB,MAAM,UAAU,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AACvF,OAAO,EACL,oBAAoB,EACpB,aAAa,EACb,wBAAwB,EACxB,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,IAAI,CACvC,CAAC,KAiCA,EAAE,EAAE;IACH,MAAM,EACJ,WAAW,EACX,OAAO,EACP,uBAAuB,EACvB,wBAAwB,EACxB,qBAAqB,EACrB,aAAa,EACb,MAAM,EACN,SAAS,EACT,yBAAyB,EACzB,WAAW,EACX,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,MAAM,EACN,gCAAgC,EAChC,gCAAgC,EAChC,6BAA6B,EAC7B,6BAA6B,EAC7B,UAAU,EACV,QAAQ,EACR,aAAa,EACb,6BAA6B,EAC7B,gBAAgB,EAChB,eAAe,EACf,0BAA0B,EAC1B,QAAQ,EACR,OAAO,EACP,iBAAiB,EACjB,iBAAiB,EAClB,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,qBAAqB,GAA6C,OAAO,CAC7E,GAAG,EAAE,CAAC,CAAC;QACL,UAAU,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,UAAU;QAC7C,iBAAiB,EAAE,WAAW;QAC9B,uBAAuB;QACvB,wBAAwB;QACxB,mBAAmB,EAAE,CAAC,CAAC,aAAa;QACpC,WAAW,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,WAAW;KAChD,CAAC,EACF;QACE,WAAW;QACX,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,UAAU;QACjC,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,WAAW;QAClC,uBAAuB;QACvB,wBAAwB;QACxB,aAAa;KACd,CACF,CAAC;IAEF,yEAAyE;IACzE,sCAAsC,CAAC,qBAAqB,CAAC,CAAC;IAE9D,MAAM,mBAAmB,GAAG,+BAA+B,CAAC;QAC1D,WAAW,EAAE,EAAE,MAAM,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,EAAE;QACrC,OAAO,oBAAO,OAAO,CAAE;QACvB,6BAA6B;QAC7B,aAAa;QACb,gBAAgB;QAChB,eAAe;QACf,0BAA0B;QAC1B,QAAQ,EAAE,MAAM;KACjB,CAAC,CAAC;IAEH,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE;QAChD,IAAI,QAAQ,KAAK,YAAY,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACtD,OAAO,EAAE,CAAC;QACZ,CAAC;QACD,OAAO;YACL,cAAc,EAAE,mBAAmB;SACpC,CAAC;QACF,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpC,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,aAAa,EAAE,CAAC;YAClB,OAAO,eAAe,CACpB;gBACE,IAAI,EAAE;oBACJ,OAAO,EAAE,iBAAiB,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE;oBAC5D,aAAa,EAAE,UAAU;iBAC1B;aACF,EACD,MAAM,CACP,CAAC;QACJ,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAC;IAE9D,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAyB,EAAE,CAAC,CAAC;IAEjG,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAAgB,EAAE,EAAE;QACnB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,sBAAsB,CACpB,+CAA+C,CAAC,mBAAmB,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC,CACvG,CAAC;QACJ,CAAC;IACH,CAAC,EACD,CAAC,sBAAsB,EAAE,mBAAmB,CAAC,CAC9C,CAAC;IAEF,MAAM,wBAAwB,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5C,iHAAiH;QACjH,+EAA+E;QAC/E,IAAI,CAAC,aAAa,IAAI,CAAC,aAAa,CAAC,iBAAiB,EAAE,CAAC;YACvD,2EAA2E;YAC3E,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO,CACL;YACE,oBAAC,8BAA8B,IAC7B,gCAAgC,EAAE,gCAAgC,aAAhC,gCAAgC,cAAhC,gCAAgC,GAAI,KAAK,EAC3E,gCAAgC,EAAE,gCAAgC,EAClE,6BAA6B,EAAE,6BAA6B,EAC5D,6BAA6B,EAAE,6BAA6B,GAC5D;YACF,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,EAAE,UAAU,EAAE,IAAI,GAAI;YACnE,KAAK,CAAC,iBAAiB,KAAK,CAAC,IAAI,CAAC,iBAAiB,IAAI,CACtD,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,oBAAoB,EAAE,aAAa,EAAE,CAAC;gBAClE,oBAAC,OAAO,IACN,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,EACjC,QAAQ,EAAC,WAAW,EACpB,aAAa,EAAC,QAAQ,EACtB,MAAM,EAAE,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,GACtC,CACI,CACT,CACA,CACJ,CAAC;IACJ,CAAC,EAAE;QACD,gCAAgC;QAChC,6BAA6B;QAC7B,6BAA6B;QAC7B,aAAa;QACb,gCAAgC;QAChC,KAAK,CAAC,iBAAiB;QACvB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB;QAC1B,KAAK;QACL,iBAAiB;KAClB,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,MAAM,eAAe,GACnB,iBAAiB,KAAK,SAAS,CAAC,CAAC,CAAC,CAChC,oBAAC,sBAAsB,IAAC,WAAW,EAAC,YAAY,EAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,iBAAiB,GAAI,CAC9G,CAAC,CAAC,CAAC,SAAS,CAAC;QAChB,OAAO,eAAe,CAAC;IACzB,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAElC,MAAM,4BAA4B,GAAG,WAAW,CAAC,GAAG,EAAE;QACpD,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,oBAAoB,EAAE,wBAAwB,EAAE,CAAC;YAC7E,oBAAC,OAAO,IACN,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,EACjC,QAAQ,EAAC,WAAW,EACpB,aAAa,EAAC,QAAQ,EACtB,MAAM,EAAE,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,GACvC,CACI,CACT,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,iBAAiB,EAAE,KAAK,CAAC,CAAC,CAAC;IAExC,OAAO,CACL,oBAAC,KAAK,kBACO,kBAAkB,EAC7B,SAAS,EAAE,WAAW,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EACzD,SAAS,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAExD,oBAAC,SAAS,kBACR,GAAG,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,kBAAkB,EACjC,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,wBAAwB,EACvC,SAAS,EAAE,SAAS,EACpB,yBAAyB,EAAE,yBAAyB,EACpD,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,MAAM,EAAE,eAAe,EACvB,mBAAmB,EACjB,KAAK,CAAC,iBAAiB,KAAK,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,cAAc,EAErG,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,IACxB,4BAA4B,IAChC,WAAW,EAAE,GAAG,EAAE,CAChB,sBAAsB,CACpB,+CAA+C,CAAC,mBAAmB,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC,CACvG,EAEH,OAAO,EAAE,gBAAgB,KAExB,mBAAmB,CAAC,MAAM,GAAG,CAAC,IAAI,CACjC,oBAAC,KAAK,IAAC,MAAM,EAAE,KAAK,CAAC,gBAAgB;YACnC,oBAAC,KAAK,IAAC,MAAM,EAAE,uBAAuB;gBACpC,oBAAC,WAAW,IAAC,cAAc,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,mBAAmB,GAAI,CACvF,CACF,CACT,CACS,CACN,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,8BAA8B,GAAG,CAAC,KAKvC,EAAe,EAAE;IAChB,MAAM,EACJ,gCAAgC,EAChC,gCAAgC,EAChC,6BAA6B,EAC7B,6BAA6B,EAC9B,GAAG,KAAK,CAAC;IACV,MAAM,eAAe,GACnB,CAAA,gCAAgC,aAAhC,gCAAgC,uBAAhC,gCAAgC,CAAE,cAAc;QAChD,6BAA6B;QAC7B,aAAa,CAAC,6BAA6B,EAAE;YAC3C,UAAU,EAAE,gCAAgC,CAAC,cAAc,CAAC,IAAI;SACjE,CAAC,CAAC;IACL,OAAO,CACL,oBAAC,KAAK,IAAC,eAAe,EAAC,KAAK,IACzB,gCAAgC;QAC/B,CAAA,gCAAgC,aAAhC,gCAAgC,uBAAhC,gCAAgC,CAAE,OAAO,MAAK,SAAS;QACvD,CAAA,gCAAgC,aAAhC,gCAAgC,uBAAhC,gCAAgC,CAAE,cAAc,MAAK,SAAS;QAC9D,CAAA,gCAAgC,aAAhC,gCAAgC,uBAAhC,gCAAgC,CAAE,cAAc,MAAK,SAAS,IAAI,CAChE,oBAAC,2BAA2B,IAC1B,OAAO,EAAE,gCAAgC,CAAC,OAAO,EACjD,cAAc,EAAE,gCAAgC,CAAC,cAAc,EAC/D,cAAc,EAAE,gCAAgC,CAAC,cAAc,EAC/D,KAAK,EAAE,6BAA6B,EACpC,eAAe,EAAE,eAAe,GAChC,CACH,CACG,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,+CAA+C,GAAG,CACtD,mBAA0C,EAC1C,cAA2B,EACH,EAAE;IAC1B,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACzB,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,OAAO,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC5C,OAAO;YACL,OAAO,EAAE,IAAI,CAAC,GAAG;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,GAAG,EAAE;;gBAChB,MAAA,IAAI,CAAC,OAAO,oDAAI,CAAC;gBACjB,cAAc,aAAd,cAAc,uBAAd,cAAc,EAAI,CAAC;YACrB,CAAC;SACF,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Spinner } from '@fluentui/react';\nimport { concatStyleSets, IContextualMenuProps, Layer } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport {\n useLocalVideoStreamLifecycleMaintainer,\n LocalVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\nimport { RaisedHand } from '../types';\nimport { useTheme } from '../theming';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n videoContainerStyles,\n overlayStyles,\n overlayStylesTransparent,\n loadSpinnerStyles\n} from './styles/VideoTile.styles';\n\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo(\n (props: {\n userId?: string;\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n onDisposeLocalStreamView?: () => void;\n isAvailable?: boolean;\n isMuted?: boolean;\n renderElement?: HTMLElement;\n displayName?: string;\n initialsName?: string;\n localVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showLabel: boolean;\n alwaysShowLabelBackground?: boolean;\n showMuteIndicator?: boolean;\n showCameraSwitcherInLocalPreview?: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n styles?: VideoTileStylesProps;\n personaMinSize?: number;\n raisedHand?: RaisedHand;\n reaction?: Reaction;\n spotlightedParticipantUserIds?: string[];\n isSpotlighted?: boolean;\n onStartSpotlight?: () => void;\n onStopSpotlight?: () => void;\n maxParticipantsToSpotlight?: number;\n menuKind?: 'contextual' | 'drawer';\n drawerMenuHostId?: string;\n strings?: VideoGalleryStrings;\n reactionResources?: ReactionResources;\n participantsCount?: number;\n isScreenSharingOn?: boolean;\n }) => {\n const {\n isAvailable,\n isMuted,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n localVideoViewOptions,\n renderElement,\n userId,\n showLabel,\n alwaysShowLabelBackground,\n displayName,\n initialsName,\n onRenderAvatar,\n showMuteIndicator,\n styles,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n raisedHand,\n reaction,\n isSpotlighted,\n spotlightedParticipantUserIds,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n menuKind,\n strings,\n reactionResources,\n isScreenSharingOn\n } = props;\n\n const theme = useTheme();\n\n const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: localVideoViewOptions?.isMirrored,\n isStreamAvailable: isAvailable,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElementExists: !!renderElement,\n scalingMode: localVideoViewOptions?.scalingMode\n }),\n [\n isAvailable,\n localVideoViewOptions?.isMirrored,\n localVideoViewOptions?.scalingMode,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElement\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: { userId: userId ?? '' },\n strings: { ...strings },\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId: userId\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual' || !contextualMenuProps) {\n return {};\n }\n return {\n contextualMenu: contextualMenuProps\n };\n return {};\n }, [contextualMenuProps, menuKind]);\n\n const videoTileStyles = useMemo(() => {\n if (isSpotlighted) {\n return concatStyleSets(\n {\n root: {\n outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,\n outlineOffset: '-0.25rem'\n }\n },\n styles\n );\n }\n return styles;\n }, [isSpotlighted, theme.palette.neutralTertiaryAlt, styles]);\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement || !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <>\n <FloatingLocalCameraCycleButton\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={localVideoSelectedDescription}\n />\n <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n {props.participantsCount === 1 && !isScreenSharingOn && (\n <Stack className={mergeStyles(videoContainerStyles, overlayStyles())}>\n <Spinner\n label={strings?.waitingScreenText}\n ariaLive=\"assertive\"\n labelPosition=\"bottom\"\n styles={loadSpinnerStyles(theme, true)}\n />\n </Stack>\n )}\n </>\n );\n }, [\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n renderElement,\n showCameraSwitcherInLocalPreview,\n props.participantsCount,\n strings?.waitingScreenText,\n theme,\n isScreenSharingOn\n ]);\n\n const videoTileOverlay = useMemo(() => {\n const reactionOverlay =\n reactionResources !== undefined ? (\n <MeetingReactionOverlay overlayMode=\"grid-tiles\" reaction={reaction} reactionResources={reactionResources} />\n ) : undefined;\n return reactionOverlay;\n }, [reaction, reactionResources]);\n\n const onRenderAvatarOneParticipant = useCallback(() => {\n return (\n <Stack className={mergeStyles(videoContainerStyles, overlayStylesTransparent())}>\n <Spinner\n label={strings?.waitingScreenText}\n ariaLive=\"assertive\"\n labelPosition=\"bottom\"\n styles={loadSpinnerStyles(theme, false)}\n />\n </Stack>\n );\n }, [strings?.waitingScreenText, theme]);\n\n return (\n <Stack\n data-ui-id=\"local-video-tile\"\n className={mergeStyles({ width: '100%', height: '100%' })}\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n >\n <VideoTile\n key={userId ?? 'local-video-tile'}\n userId={userId}\n renderElement={renderVideoStreamElement}\n showLabel={showLabel}\n alwaysShowLabelBackground={alwaysShowLabelBackground}\n displayName={displayName}\n initialsName={initialsName}\n styles={videoTileStyles}\n onRenderPlaceholder={\n props.participantsCount === 1 && !isScreenSharingOn ? onRenderAvatarOneParticipant : onRenderAvatar\n }\n isMuted={isMuted}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n raisedHand={raisedHand}\n isSpotlighted={isSpotlighted}\n {...videoTileContextualMenuProps}\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n overlay={videoTileOverlay}\n >\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} />\n </Stack>\n </Layer>\n )}\n </VideoTile>\n </Stack>\n );\n }\n);\n\nconst FloatingLocalCameraCycleButton = (props: {\n showCameraSwitcherInLocalPreview: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n}): JSX.Element => {\n const {\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription\n } = props;\n const ariaDescription =\n localVideoCameraCycleButtonProps?.selectedCamera &&\n localVideoSelectedDescription &&\n _formatString(localVideoSelectedDescription, {\n cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n });\n return (\n <Stack horizontalAlign=\"end\">\n {showCameraSwitcherInLocalPreview &&\n localVideoCameraCycleButtonProps?.cameras !== undefined &&\n localVideoCameraCycleButtonProps?.selectedCamera !== undefined &&\n localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && (\n <LocalVideoCameraCycleButton\n cameras={localVideoCameraCycleButtonProps.cameras}\n selectedCamera={localVideoCameraCycleButtonProps.selectedCamera}\n onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera}\n label={localVideoCameraSwitcherLabel}\n ariaDescription={ariaDescription}\n />\n )}\n </Stack>\n );\n};\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}
@@ -31,15 +31,15 @@ export const _TroubleshootingGuideErrorBar = (props) => {
31
31
  onPermissionsTroubleshootingClick && (React.createElement(Link, { onClick: () => {
32
32
  onPermissionsTroubleshootingClick(permissionsState);
33
33
  }, underline: true },
34
- React.createElement("span", null, troubleshootingGuideStrings.devicePermissionLinkText)))));
34
+ React.createElement("span", { style: { color: theme.palette.themeDarkAlt } }, troubleshootingGuideStrings.devicePermissionLinkText)))));
35
35
  const networkErrorBar = (React.createElement("div", null,
36
36
  strings[error.type],
37
37
  ' ',
38
38
  onNetworkingTroubleshootingClick && (React.createElement(Link, { onClick: onNetworkingTroubleshootingClick, underline: true },
39
- React.createElement("span", null, troubleshootingGuideStrings.networkTroubleshootingLinkText)))));
39
+ React.createElement("span", { style: { color: theme.palette.themeDarkAlt } }, troubleshootingGuideStrings.networkTroubleshootingLinkText)))));
40
40
  return (React.createElement(MessageBar, Object.assign({}, props, { styles: messageBarStyle(theme, messageBarType(error.type)), key: error.type, messageBarType: messageBarType(error.type), messageBarIconProps: messageBarIconProps(error.type), actions: React.createElement(MessageBarButton, { text: troubleshootingGuideStrings.dismissButtonText, styles: dismissButtonStyle(theme), onClick: () => {
41
41
  setDismissedErrors(dismissError(dismissedErrors, error));
42
- }, ariaLabel: strings.dismissButtonAriaLabel }), isMultiline: false }), showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)));
42
+ }, ariaLabel: troubleshootingGuideStrings.dismissButtonText }), isMultiline: false }), showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)));
43
43
  })));
44
44
  };
45
45
  const showErrorBar = (errorType, devicePermissionErrorBar, networkErrorBar) => {
@@ -1 +1 @@
1
- {"version":3,"file":"TroubleshootingGuideErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/TroubleshootingGuideErrorBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useState } from 'react';\nimport { Link, MessageBar, MessageBarButton, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport { ErrorBarProps } from './ErrorBar';\nimport { dismissButtonStyle, messageBarStyle } from './styles/TroubleshootingGuideErrorBar.styles';\nimport {\n DismissedError,\n dismissError,\n dropDismissalsForInactiveErrors,\n errorsToShow,\n messageBarIconProps,\n messageBarType\n} from './utils';\n\n/**\n * Strings for {@link _TroubleshootingGuideErrorBar}.\n *\n * @internal\n */\nexport interface _TroubleshootingGuideErrorBarStrings {\n devicePermissionLinkText?: string;\n networkTroubleshootingLinkText?: string;\n dismissButtonText?: string;\n}\n\n/**\n * Props for {@link _TroubleshootingGuideErrorBar}.\n *\n * @internal\n */\nexport interface _TroubleshootingGuideErrorBarProps extends ErrorBarProps {\n /**\n * permissions state for camera/microphone\n */\n permissionsState?: {\n camera: PermissionState;\n microphone: PermissionState;\n };\n /**\n * Callback you may provide to supply users with further steps to troubleshoot why they have been\n * unable to grant your site the required permissions for the call.\n *\n * @example\n * ```ts\n * onPermissionsTroubleshootingClick: () =>\n * window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n * ```\n *\n * @remarks\n * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n */\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n /**\n * Optional callback to supply users with further troubleshooting steps for network issues\n * experienced when connecting to a call.\n *\n * @example\n * ```ts\n * onNetworkingTroubleshootingClick?: () =>\n * window.open('https://contoso.com/network-troubleshooting', '_blank');\n * ```\n *\n * @remarks\n * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n */\n onNetworkingTroubleshootingClick?: () => void;\n /**\n * strings related to trouble shooting guidance link and dismiss button\n */\n troubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings;\n}\n\n/**\n * @internal\n * A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide\n */\nexport const _TroubleshootingGuideErrorBar = (props: _TroubleshootingGuideErrorBarProps): JSX.Element => {\n const theme = useTheme();\n // error bar strings\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n\n const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n const {\n onPermissionsTroubleshootingClick,\n onNetworkingTroubleshootingClick,\n permissionsState = {\n camera: 'denied',\n microphone: 'denied'\n },\n troubleshootingGuideStrings\n } = props;\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(\n () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)),\n [props.activeErrorMessages, dismissedErrors]\n );\n\n const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);\n\n return (\n <Stack data-ui-id=\"notifications-stack\">\n {toShow.map((error) => {\n const devicePermissionErrorBar = (\n <div>\n {strings[error.type]}{' '}\n {onPermissionsTroubleshootingClick && (\n <Link\n onClick={() => {\n onPermissionsTroubleshootingClick(permissionsState);\n }}\n underline\n >\n <span>{troubleshootingGuideStrings.devicePermissionLinkText}</span>\n </Link>\n )}\n </div>\n );\n\n const networkErrorBar = (\n <div>\n {strings[error.type]}{' '}\n {onNetworkingTroubleshootingClick && (\n <Link onClick={onNetworkingTroubleshootingClick} underline>\n <span>{troubleshootingGuideStrings.networkTroubleshootingLinkText}</span>\n </Link>\n )}\n </div>\n );\n\n return (\n <MessageBar\n {...props}\n styles={messageBarStyle(theme, messageBarType(error.type))}\n key={error.type}\n messageBarType={messageBarType(error.type)}\n messageBarIconProps={messageBarIconProps(error.type)}\n actions={\n <MessageBarButton\n text={troubleshootingGuideStrings.dismissButtonText}\n styles={dismissButtonStyle(theme)}\n onClick={() => {\n setDismissedErrors(dismissError(dismissedErrors, error));\n }}\n ariaLabel={strings.dismissButtonAriaLabel}\n />\n }\n isMultiline={false}\n >\n {showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)}\n </MessageBar>\n );\n })}\n </Stack>\n );\n};\n\nconst showErrorBar = (\n errorType: string,\n devicePermissionErrorBar: JSX.Element,\n networkErrorBar: JSX.Element\n): JSX.Element => {\n if (errorType === 'callNetworkQualityLow') {\n return networkErrorBar;\n } else {\n return devicePermissionErrorBar;\n }\n};\n"]}
1
+ {"version":3,"file":"TroubleshootingGuideErrorBar.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/TroubleshootingGuideErrorBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect, useState } from 'react';\nimport { Link, MessageBar, MessageBarButton, Stack, useTheme } from '@fluentui/react';\nimport { useLocale } from '../localization';\nimport { ErrorBarProps } from './ErrorBar';\nimport { dismissButtonStyle, messageBarStyle } from './styles/TroubleshootingGuideErrorBar.styles';\nimport {\n DismissedError,\n dismissError,\n dropDismissalsForInactiveErrors,\n errorsToShow,\n messageBarIconProps,\n messageBarType\n} from './utils';\n\n/**\n * Strings for {@link _TroubleshootingGuideErrorBar}.\n *\n * @internal\n */\nexport interface _TroubleshootingGuideErrorBarStrings {\n devicePermissionLinkText?: string;\n networkTroubleshootingLinkText?: string;\n dismissButtonText?: string;\n}\n\n/**\n * Props for {@link _TroubleshootingGuideErrorBar}.\n *\n * @internal\n */\nexport interface _TroubleshootingGuideErrorBarProps extends ErrorBarProps {\n /**\n * permissions state for camera/microphone\n */\n permissionsState?: {\n camera: PermissionState;\n microphone: PermissionState;\n };\n /**\n * Callback you may provide to supply users with further steps to troubleshoot why they have been\n * unable to grant your site the required permissions for the call.\n *\n * @example\n * ```ts\n * onPermissionsTroubleshootingClick: () =>\n * window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n * ```\n *\n * @remarks\n * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n */\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n /**\n * Optional callback to supply users with further troubleshooting steps for network issues\n * experienced when connecting to a call.\n *\n * @example\n * ```ts\n * onNetworkingTroubleshootingClick?: () =>\n * window.open('https://contoso.com/network-troubleshooting', '_blank');\n * ```\n *\n * @remarks\n * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n */\n onNetworkingTroubleshootingClick?: () => void;\n /**\n * strings related to trouble shooting guidance link and dismiss button\n */\n troubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings;\n}\n\n/**\n * @internal\n * A component to show device Permission/network connection related errors, contains link that leads to further trouble shooting guide\n */\nexport const _TroubleshootingGuideErrorBar = (props: _TroubleshootingGuideErrorBarProps): JSX.Element => {\n const theme = useTheme();\n // error bar strings\n const localeStrings = useLocale().strings.errorBar;\n const strings = props.strings ?? localeStrings;\n\n const [dismissedErrors, setDismissedErrors] = useState<DismissedError[]>([]);\n\n const {\n onPermissionsTroubleshootingClick,\n onNetworkingTroubleshootingClick,\n permissionsState = {\n camera: 'denied',\n microphone: 'denied'\n },\n troubleshootingGuideStrings\n } = props;\n\n // dropDismissalsForInactiveErrors only returns a new object if `dismissedErrors` actually changes.\n // Without this behaviour, this `useEffect` block would cause a render loop.\n useEffect(\n () => setDismissedErrors(dropDismissalsForInactiveErrors(props.activeErrorMessages, dismissedErrors)),\n [props.activeErrorMessages, dismissedErrors]\n );\n\n const toShow = errorsToShow(props.activeErrorMessages, dismissedErrors);\n\n return (\n <Stack data-ui-id=\"notifications-stack\">\n {toShow.map((error) => {\n const devicePermissionErrorBar = (\n <div>\n {strings[error.type]}{' '}\n {onPermissionsTroubleshootingClick && (\n <Link\n onClick={() => {\n onPermissionsTroubleshootingClick(permissionsState);\n }}\n underline\n >\n <span style={{ color: theme.palette.themeDarkAlt }}>\n {troubleshootingGuideStrings.devicePermissionLinkText}\n </span>\n </Link>\n )}\n </div>\n );\n\n const networkErrorBar = (\n <div>\n {strings[error.type]}{' '}\n {onNetworkingTroubleshootingClick && (\n <Link onClick={onNetworkingTroubleshootingClick} underline>\n <span style={{ color: theme.palette.themeDarkAlt }}>\n {troubleshootingGuideStrings.networkTroubleshootingLinkText}\n </span>\n </Link>\n )}\n </div>\n );\n\n return (\n <MessageBar\n {...props}\n styles={messageBarStyle(theme, messageBarType(error.type))}\n key={error.type}\n messageBarType={messageBarType(error.type)}\n messageBarIconProps={messageBarIconProps(error.type)}\n actions={\n <MessageBarButton\n text={troubleshootingGuideStrings.dismissButtonText}\n styles={dismissButtonStyle(theme)}\n onClick={() => {\n setDismissedErrors(dismissError(dismissedErrors, error));\n }}\n ariaLabel={troubleshootingGuideStrings.dismissButtonText}\n />\n }\n isMultiline={false}\n >\n {showErrorBar(error.type, devicePermissionErrorBar, networkErrorBar)}\n </MessageBar>\n );\n })}\n </Stack>\n );\n};\n\nconst showErrorBar = (\n errorType: string,\n devicePermissionErrorBar: JSX.Element,\n networkErrorBar: JSX.Element\n): JSX.Element => {\n if (errorType === 'callNetworkQualityLow') {\n return networkErrorBar;\n } else {\n return devicePermissionErrorBar;\n }\n};\n"]}