npm - @azure/communication-react - Versions diffs - 1.16.0-alpha-202404260012 → 1.16.0-alpha-202404270012 - Mend

@azure/communication-react 1.16.0-alpha-202404260012 → 1.16.0-alpha-202404270012

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 (24) hide show

package/dist/dist-cjs/communication-react/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-r7pKdpFV.js');
+var index = require('./index-aGXLnB_I.js');
 require('react');
 require('@fluentui/react');
 require('@fluentui/react-components');

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js CHANGED Viewed

@@ -2,5 +2,5 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 // GENERATED FILE. DO NOT EDIT MANUALLY.
-module.exports = '1.16.0-alpha-202404260012';
+module.exports = '1.16.0-alpha-202404270012';
 //# sourceMappingURL=telemetryVersion.js.map

package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map CHANGED Viewed

	@@ -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.16.0-alpha-~~202404260012~~';\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.16.0-alpha-202404270012';\n"]}

package/dist/dist-esm/react-components/src/components/DevicesButton.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { IContextualMenuItem, IContextualMenuItemStyles, IContextualMenuStyles } from '@fluentui/react';
+import { VideoStreamOptions } from '../types';
 import { ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';
 /**
  * Styles for the {@link DevicesButton} menu.
@@ -141,7 +142,7 @@ export interface DeviceMenuProps {
     selectedMicrophone?: OptionsDevice;
     selectedSpeaker?: OptionsDevice;
     selectedCamera?: OptionsDevice;
-    onSelectCamera?: (device: OptionsDevice) => Promise<void>;
+    onSelectCamera?: (device: OptionsDevice, options?: VideoStreamOptions) => Promise<void>;
     onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;
     onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;
     styles?: Partial<DeviceMenuStyles>;

package/dist/dist-esm/react-components/src/components/DevicesButton.js CHANGED Viewed

@@ -1,12 +1,16 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import { ContextualMenuItemType, merge } from '@fluentui/react';
+import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../acs-ui-common/src";
 import React from 'react';
 import { useLocale } from '../localization';
 import { ControlBarButton } from './ControlBarButton';
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
 import { buttonFlyoutItemStyles } from './styles/ControlBar.styles';
-import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../acs-ui-common/src";
+const defaultLocalVideoViewOptions = {
+    scalingMode: 'Crop',
+    isMirrored: true
+};
 /**
  * Generates default {@link IContextualMenuProps} for buttons that
  * show a drop-down to select devices to use.
@@ -61,7 +65,7 @@ export const generateDefaultDeviceMenuProps = (props, strings, primaryActionItem
                                 isChecked: camera.id === (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id),
                                 onClick: () => {
                                     if (camera.id !== (selectedCamera === null || selectedCamera === void 0 ? void 0 : selectedCamera.id)) {
-                                        onSelectCamera(camera);
+                                        onSelectCamera(camera, defaultLocalVideoViewOptions);
                                     }
                                 }
                             }))

package/dist/dist-esm/react-components/src/components/DevicesButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n ContextualMenuItemType,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n IContextualMenuProps,\n IContextualMenuStyles,\n merge\n} from '@fluentui/react';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\n\n/*\n Styles for the {@link DevicesButton} menu.\n \n @public\n /\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n /\n Styles for the items inside the {@link DevicesButton} button menu.\n /\n menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/\n Styles for the Devices button menu items.\n \n @public\n /\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n /\n Styles for the {@link DevicesButton} menu.\n /\n menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/\n A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n \n @public\n /\nexport interface OptionsDevice {\n /\n Device unique identifier\n /\n id: string;\n /\n Device name\n /\n name: string;\n}\n\n/\n Strings of {@link DevicesButton} that can be overridden.\n \n @public\n /\nexport interface DevicesButtonStrings {\n /\n Label of button\n /\n label: string;\n /\n Button tooltip content.\n /\n tooltipContent?: string;\n /\n Title of camera menu\n /\n cameraMenuTitle: string;\n /\n Title of microphone menu\n /\n microphoneMenuTitle: string;\n /\n Title of speaker menu\n /\n speakerMenuTitle: string;\n /\n Tooltip of camera menu\n /\n cameraMenuTooltip: string;\n /\n Tooltip of microphone menu\n /\n microphoneMenuTooltip: string;\n /\n Tooltip of speaker menu\n /\n speakerMenuTooltip: string;\n}\n\n/\n Props for {@link DevicesButton}.\n \n @public\n /\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n /\n Available microphones for selection\n /\n microphones?: OptionsDevice[];\n /\n Available speakers for selection\n /\n speakers?: OptionsDevice[];\n /\n Available cameras for selection\n /\n cameras?: OptionsDevice[];\n /\n Microphone that is shown as currently selected\n /\n selectedMicrophone?: OptionsDevice;\n /\n Speaker that is shown as currently selected\n /\n selectedSpeaker?: OptionsDevice;\n /\n Camera that is shown as currently selected\n /\n selectedCamera?: OptionsDevice;\n /\n Callback when a camera is selected\n /\n onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n /\n Callback when a microphone is selected\n /\n onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n /\n Speaker when a speaker is selected\n /\n onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n /\n Optional strings to override in component\n /\n strings?: Partial<DevicesButtonStrings>;\n /\n Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n * Recommended for mobile devices.\n /\n styles?: DevicesButtonStyles;\n}\n\n/\n Subset props for various buttons that show device selection menus.\n \n @internal\n /\nexport interface DeviceMenuProps {\n microphones?: OptionsDevice[];\n speakers?: OptionsDevice[];\n cameras?: OptionsDevice[];\n selectedMicrophone?: OptionsDevice;\n selectedSpeaker?: OptionsDevice;\n selectedCamera?: OptionsDevice;\n onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n styles?: Partial<DeviceMenuStyles>;\n}\n\n/\n Subset of strings for various buttons that show device selection menus.\n \n @internal\n /\nexport interface DeviceMenuStrings {\n /\n Title for Camera section in the contextual menu\n /\n cameraMenuTitle?: string;\n /\n Title for Audio Device section in the contextual menu\n \n @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n /\n audioDeviceMenuTitle?: string;\n /\n Title for Microphone section in the contextual menu\n \n @remark Used when speakers can be enumerated\n /\n microphoneMenuTitle?: string;\n /\n Title for Speaker section in the contextual menu\n /\n speakerMenuTitle?: string;\n /\n Tooltip label for Camera section in the contextual menu\n /\n cameraMenuTooltip?: string;\n /\n Tooltip label for Audio Device section in the contextual menu\n \n @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n /\n audioDeviceMenuTooltip?: string;\n /\n Tooltip label for Microphone section in the contextual menu\n \n @remark Used when speakers can be enumerated\n /\n microphoneMenuTooltip?: string;\n /\n Tooltip label for Speaker section in the contextual menu\n /\n speakerMenuTooltip?: string;\n}\n\n/\n Styles for flyouts used by various buttons for device selection flyouts.\n \n @internal\n /\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/\n Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n \n @internal\n /\nexport const generateDefaultDeviceMenuProps = (\n props: DeviceMenuProps,\n strings: DeviceMenuStrings,\n primaryActionItem?: IContextualMenuItem,\n isSelectCamAllowed = true,\n isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } \| undefined => {\n const {\n microphones,\n speakers,\n cameras,\n selectedMicrophone,\n selectedSpeaker,\n selectedCamera,\n onSelectCamera,\n onSelectMicrophone,\n onSelectSpeaker\n } = props;\n\n const defaultMenuProps: IContextualMenuProps = {\n items: [],\n styles: props.styles,\n calloutProps: {\n styles: {\n root: {\n // Confine the menu to the parents bounds.\n // More info: https://github.com/microsoft/fluentui/issues/18835\n // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n maxWidth: '95%'\n }\n },\n preventDismissOnEvent\n }\n };\n\n const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n defaultMenuProps.items.push({\n key: 'cameras',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.cameraMenuTitle,\n items: [\n {\n key: 'sectionCamera',\n title: strings.cameraMenuTooltip,\n subMenuProps: {\n calloutProps: {\n preventDismissOnEvent\n },\n items: cameras.map((camera) => ({\n key: camera.id,\n text: camera.name,\n title: camera.name,\n iconProps: {\n iconName: 'ContextMenuCameraIcon',\n styles: { root: { lineHeight: 0 } }\n },\n itemProps: {\n styles: menuItemStyles\n },\n canCheck: true,\n isChecked: camera.id === selectedCamera?.id,\n onClick: () => {\n if (camera.id !== selectedCamera?.id) {\n onSelectCamera(camera);\n }\n }\n }))\n },\n text: selectedCamera.name\n }\n ]\n }\n });\n if (primaryActionItem) {\n defaultMenuProps.items.push(primaryActionItem);\n }\n }\n\n if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n // Set props as Microphone if speakers can be enumerated else set as Audio Device\n const speakersAvailable = speakers && speakers.length > 0;\n const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n\n defaultMenuProps.items.push({\n key: 'microphones',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.microphoneMenuTitle,\n items: [\n {\n key: key,\n title: title,\n subMenuProps: {\n calloutProps: {\n preventDismissOnEvent\n },\n items: microphones.map((microphone) => ({\n key: microphone.id,\n text: microphone.name,\n title: microphone.name,\n itemProps: {\n styles: menuItemStyles\n },\n iconProps: {\n iconName: 'ContextMenuMicIcon',\n styles: { root: { lineHeight: 0 } }\n },\n canCheck: true,\n isChecked: microphone.id === selectedMicrophone?.id,\n onClick: () => {\n if (microphone.id !== selectedMicrophone?.id) {\n onSelectMicrophone(microphone);\n }\n }\n }))\n },\n text: selectedMicrophone.name\n }\n ]\n }\n });\n }\n\n if (speakers && selectedSpeaker && onSelectSpeaker) {\n defaultMenuProps.items.push({\n key: 'speakers',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.speakerMenuTitle,\n items: [\n {\n key: 'sectionSpeaker',\n subMenuProps: {\n calloutProps: {\n preventDismissOnEvent\n },\n items: speakers.map((speaker) => ({\n key: speaker.id,\n text: speaker.name,\n title: speaker.name,\n itemProps: {\n styles: menuItemStyles\n },\n iconProps: {\n iconName: 'ContextMenuSpeakerIcon',\n styles: { root: { lineHeight: 0 } }\n },\n canCheck: true,\n isChecked: speaker.id === selectedSpeaker?.id,\n onClick: () => {\n if (speaker.id !== selectedSpeaker?.id) {\n onSelectSpeaker(speaker);\n }\n }\n }))\n },\n text: selectedSpeaker.name\n }\n ]\n }\n });\n }\n if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {\n defaultMenuProps.items.push(primaryActionItem);\n }\n\n if (defaultMenuProps.items.length === 0) {\n // Avoids creating an empty context menu.\n return undefined;\n }\n return defaultMenuProps;\n};\n\n/\n A button to open a menu that controls device options.\n \n Can be used with {@link ControlBar}.\n \n @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n const { onRenderIcon } = props;\n\n const localeStrings = useLocale().strings.devicesButton;\n const strings = { ...localeStrings, ...props.strings };\n\n const devicesButtonMenu =\n props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n const onRenderOptionsIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n };\n\n return (\n <ControlBarButton\n {...props}\n menuProps={devicesButtonMenu}\n menuIconProps={{ hidden: true }}\n onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'devicesButtonLabel'}\n />\n );\n};\n"]}
1	+ {"version":3,"file":"DevicesButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/DevicesButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n ContextualMenuItemType,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n IContextualMenuProps,\n IContextualMenuStyles,\n merge\n} from '@fluentui/react';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport React from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps, ControlBarButtonStyles } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\nimport { buttonFlyoutItemStyles } from './styles/ControlBar.styles';\n\nconst defaultLocalVideoViewOptions = {\n scalingMode: 'Crop',\n isMirrored: true\n} as VideoStreamOptions;\n\n/*\n Styles for the {@link DevicesButton} menu.\n \n @public\n /\nexport interface DevicesButtonContextualMenuStyles extends IContextualMenuStyles {\n /\n Styles for the items inside the {@link DevicesButton} button menu.\n /\n menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/\n Styles for the Devices button menu items.\n \n @public\n /\nexport interface DevicesButtonStyles extends ControlBarButtonStyles {\n /\n Styles for the {@link DevicesButton} menu.\n /\n menuStyles?: Partial<DevicesButtonContextualMenuStyles>;\n}\n\n/\n A device, e.g. camera, microphone, or speaker, in the {@link DevicesButton} flyout.\n \n @public\n /\nexport interface OptionsDevice {\n /\n Device unique identifier\n /\n id: string;\n /\n Device name\n /\n name: string;\n}\n\n/\n Strings of {@link DevicesButton} that can be overridden.\n \n @public\n /\nexport interface DevicesButtonStrings {\n /\n Label of button\n /\n label: string;\n /\n Button tooltip content.\n /\n tooltipContent?: string;\n /\n Title of camera menu\n /\n cameraMenuTitle: string;\n /\n Title of microphone menu\n /\n microphoneMenuTitle: string;\n /\n Title of speaker menu\n /\n speakerMenuTitle: string;\n /\n Tooltip of camera menu\n /\n cameraMenuTooltip: string;\n /\n Tooltip of microphone menu\n /\n microphoneMenuTooltip: string;\n /\n Tooltip of speaker menu\n /\n speakerMenuTooltip: string;\n}\n\n/\n Props for {@link DevicesButton}.\n \n @public\n /\nexport interface DevicesButtonProps extends ControlBarButtonProps {\n /\n Available microphones for selection\n /\n microphones?: OptionsDevice[];\n /\n Available speakers for selection\n /\n speakers?: OptionsDevice[];\n /\n Available cameras for selection\n /\n cameras?: OptionsDevice[];\n /\n Microphone that is shown as currently selected\n /\n selectedMicrophone?: OptionsDevice;\n /\n Speaker that is shown as currently selected\n /\n selectedSpeaker?: OptionsDevice;\n /\n Camera that is shown as currently selected\n /\n selectedCamera?: OptionsDevice;\n /\n Callback when a camera is selected\n /\n onSelectCamera?: (device: OptionsDevice) => Promise<void>;\n /\n Callback when a microphone is selected\n /\n onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n /\n Speaker when a speaker is selected\n /\n onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n /\n Optional strings to override in component\n /\n strings?: Partial<DevicesButtonStrings>;\n /\n Option to increase the touch targets of the button flyout menu items from 36px to 48px.\n * Recommended for mobile devices.\n /\n styles?: DevicesButtonStyles;\n}\n\n/\n Subset props for various buttons that show device selection menus.\n \n @internal\n /\nexport interface DeviceMenuProps {\n microphones?: OptionsDevice[];\n speakers?: OptionsDevice[];\n cameras?: OptionsDevice[];\n selectedMicrophone?: OptionsDevice;\n selectedSpeaker?: OptionsDevice;\n selectedCamera?: OptionsDevice;\n onSelectCamera?: (device: OptionsDevice, options?: VideoStreamOptions) => Promise<void>;\n onSelectMicrophone?: (device: OptionsDevice) => Promise<void>;\n onSelectSpeaker?: (device: OptionsDevice) => Promise<void>;\n styles?: Partial<DeviceMenuStyles>;\n}\n\n/\n Subset of strings for various buttons that show device selection menus.\n \n @internal\n /\nexport interface DeviceMenuStrings {\n /\n Title for Camera section in the contextual menu\n /\n cameraMenuTitle?: string;\n /\n Title for Audio Device section in the contextual menu\n \n @remark Used in place of microphoneMenuTitle when speakers can be enumerated\n /\n audioDeviceMenuTitle?: string;\n /\n Title for Microphone section in the contextual menu\n \n @remark Used when speakers can be enumerated\n /\n microphoneMenuTitle?: string;\n /\n Title for Speaker section in the contextual menu\n /\n speakerMenuTitle?: string;\n /\n Tooltip label for Camera section in the contextual menu\n /\n cameraMenuTooltip?: string;\n /\n Tooltip label for Audio Device section in the contextual menu\n \n @remark Used in place of microphoneMenuTooltip when speakers can be enumerated\n /\n audioDeviceMenuTooltip?: string;\n /\n Tooltip label for Microphone section in the contextual menu\n \n @remark Used when speakers can be enumerated\n /\n microphoneMenuTooltip?: string;\n /\n Tooltip label for Speaker section in the contextual menu\n /\n speakerMenuTooltip?: string;\n}\n\n/\n Styles for flyouts used by various buttons for device selection flyouts.\n \n @internal\n /\nexport interface DeviceMenuStyles extends IContextualMenuStyles {\n menuItemStyles?: IContextualMenuItemStyles;\n}\n\n/\n Generates default {@link IContextualMenuProps} for buttons that\n * show a drop-down to select devices to use.\n \n @internal\n /\nexport const generateDefaultDeviceMenuProps = (\n props: DeviceMenuProps,\n strings: DeviceMenuStrings,\n primaryActionItem?: IContextualMenuItem,\n isSelectCamAllowed = true,\n isSelectMicAllowed = true\n): { items: IContextualMenuItem[] } \| undefined => {\n const {\n microphones,\n speakers,\n cameras,\n selectedMicrophone,\n selectedSpeaker,\n selectedCamera,\n onSelectCamera,\n onSelectMicrophone,\n onSelectSpeaker\n } = props;\n\n const defaultMenuProps: IContextualMenuProps = {\n items: [],\n styles: props.styles,\n calloutProps: {\n styles: {\n root: {\n // Confine the menu to the parents bounds.\n // More info: https://github.com/microsoft/fluentui/issues/18835\n // NB: 95% to keep some space for margin, drop shadow etc around the Callout.\n maxWidth: '95%'\n }\n },\n preventDismissOnEvent\n }\n };\n\n const menuItemStyles = merge(buttonFlyoutItemStyles, props.styles?.menuItemStyles ?? {});\n\n if (cameras && selectedCamera && onSelectCamera && isSelectCamAllowed) {\n defaultMenuProps.items.push({\n key: 'cameras',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.cameraMenuTitle,\n items: [\n {\n key: 'sectionCamera',\n title: strings.cameraMenuTooltip,\n subMenuProps: {\n calloutProps: {\n preventDismissOnEvent\n },\n items: cameras.map((camera) => ({\n key: camera.id,\n text: camera.name,\n title: camera.name,\n iconProps: {\n iconName: 'ContextMenuCameraIcon',\n styles: { root: { lineHeight: 0 } }\n },\n itemProps: {\n styles: menuItemStyles\n },\n canCheck: true,\n isChecked: camera.id === selectedCamera?.id,\n onClick: () => {\n if (camera.id !== selectedCamera?.id) {\n onSelectCamera(camera, defaultLocalVideoViewOptions);\n }\n }\n }))\n },\n text: selectedCamera.name\n }\n ]\n }\n });\n if (primaryActionItem) {\n defaultMenuProps.items.push(primaryActionItem);\n }\n }\n\n if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed) {\n // Set props as Microphone if speakers can be enumerated else set as Audio Device\n const speakersAvailable = speakers && speakers.length > 0;\n const key = speakersAvailable ? 'sectionMicrophone' : 'sectionAudioDevice';\n const title = speakersAvailable ? strings.microphoneMenuTooltip : strings.audioDeviceMenuTooltip;\n\n defaultMenuProps.items.push({\n key: 'microphones',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.microphoneMenuTitle,\n items: [\n {\n key: key,\n title: title,\n subMenuProps: {\n calloutProps: {\n preventDismissOnEvent\n },\n items: microphones.map((microphone) => ({\n key: microphone.id,\n text: microphone.name,\n title: microphone.name,\n itemProps: {\n styles: menuItemStyles\n },\n iconProps: {\n iconName: 'ContextMenuMicIcon',\n styles: { root: { lineHeight: 0 } }\n },\n canCheck: true,\n isChecked: microphone.id === selectedMicrophone?.id,\n onClick: () => {\n if (microphone.id !== selectedMicrophone?.id) {\n onSelectMicrophone(microphone);\n }\n }\n }))\n },\n text: selectedMicrophone.name\n }\n ]\n }\n });\n }\n\n if (speakers && selectedSpeaker && onSelectSpeaker) {\n defaultMenuProps.items.push({\n key: 'speakers',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n title: strings.speakerMenuTitle,\n items: [\n {\n key: 'sectionSpeaker',\n subMenuProps: {\n calloutProps: {\n preventDismissOnEvent\n },\n items: speakers.map((speaker) => ({\n key: speaker.id,\n text: speaker.name,\n title: speaker.name,\n itemProps: {\n styles: menuItemStyles\n },\n iconProps: {\n iconName: 'ContextMenuSpeakerIcon',\n styles: { root: { lineHeight: 0 } }\n },\n canCheck: true,\n isChecked: speaker.id === selectedSpeaker?.id,\n onClick: () => {\n if (speaker.id !== selectedSpeaker?.id) {\n onSelectSpeaker(speaker);\n }\n }\n }))\n },\n text: selectedSpeaker.name\n }\n ]\n }\n });\n }\n if (microphones && selectedMicrophone && onSelectMicrophone && isSelectMicAllowed && primaryActionItem) {\n defaultMenuProps.items.push(primaryActionItem);\n }\n\n if (defaultMenuProps.items.length === 0) {\n // Avoids creating an empty context menu.\n return undefined;\n }\n return defaultMenuProps;\n};\n\n/\n A button to open a menu that controls device options.\n \n Can be used with {@link ControlBar}.\n \n @public\n */\nexport const DevicesButton = (props: DevicesButtonProps): JSX.Element => {\n const { onRenderIcon } = props;\n\n const localeStrings = useLocale().strings.devicesButton;\n const strings = { ...localeStrings, ...props.strings };\n\n const devicesButtonMenu =\n props.menuProps ?? generateDefaultDeviceMenuProps({ ...props, styles: props.styles?.menuStyles }, strings);\n\n const onRenderOptionsIcon = (): JSX.Element => {\n return <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ControlButtonOptions\" />;\n };\n\n return (\n <ControlBarButton\n {...props}\n menuProps={devicesButtonMenu}\n menuIconProps={{ hidden: true }}\n onRenderIcon={onRenderIcon ?? onRenderOptionsIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'devicesButtonLabel'}\n />\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTableButton.js CHANGED Viewed

@@ -26,7 +26,7 @@ export const insertTableButton = (theme, maxRowsNumber, maxColumnsNumber) => {
                 insertTablePane: `Insert ${ColumnRowReplaceString} table`
             },
             itemRender: (item, onClick) => {
-                return (React.createElement(RichTextInsertTablePane, { item: item, onClick: onClick, theme: theme, maxColumnsNumber: maxColumnsNumber, maxRowsNumber: maxRowsNumber }));
+                return (React.createElement(RichTextInsertTablePane, { item: item, onClick: onClick, maxColumnsNumber: maxColumnsNumber, maxRowsNumber: maxRowsNumber }));
             },
             commandBarSubMenuProperties: {
                 className: insertTableMenuTablePane

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTableButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextInsertTableButton.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTableButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGvE,OAAO,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AACzG,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAGrF,kGAAkG;AAElG;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAY,EACZ,aAAqB,EACrB,gBAAwB,EACF,EAAE;IACxB,OAAO;QACL,GAAG,EAAE,uBAAuB;QAC5B,eAAe,EAAE,cAAc;QAC/B,4CAA4C;QAC5C,QAAQ,EAAE,EAAE;QACZ,OAAO,EAAE,CAAC,MAAe,EAAE,GAAW,EAAE,EAAE;YACxC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;YACtC,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;QACzC,CAAC;QACD,YAAY,EAAE;YACZ,KAAK,EAAE;gBACL,6DAA6D;gBAC7D,eAAe,EAAE,UAAU,sBAAsB,QAAQ;aAC1D;YACD,UAAU,EAAE,CACV,IAAyB,EACzB,OAAyG,EACzG,EAAE;gBACF,OAAO,CACL,oBAAC,uBAAuB,IACtB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,~~KAAK,EAAE,KAAK,EACZ,~~gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;YACJ,CAAC;YACD,2BAA2B,EAAE;gBAC3B,SAAS,EAAE,wBAAwB;aACpC;SACF;QACD,oBAAoB,EAAE;YACpB,wBAAwB;YACxB,aAAa,EAAE;gBACb,MAAM,EAAE,IAAI;aACb;YACD,YAAY,EAAE,GAAG,EAAE;gBACjB,OAAO,oBAAC,SAAS,OAAG,CAAC;YACvB,CAAC;YACD,YAAY,EAAE,sBAAsB,CAAC,KAAK,CAAC;YAC3C,QAAQ,EAAE,KAAK;SAChB;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAgB,EAAE;IAClC,OAAO;IACL,qGAAqG;IACrG,oBAAC,KAAK;QACJ,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,EAAC,SAAS,EAAE,iCAAiC,GAAI;QAC/F,oBAAC,IAAI,IAAC,QAAQ,EAAC,gCAAgC,EAAC,SAAS,EAAE,kCAAkC,GAAI,CAC3F,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { Icon, Stack } from '@fluentui/react';\nimport { insertTable as insertTableAction } from './insertTableAction';\nimport type { RibbonButton } from 'roosterjs-react';\nimport type { IContextualMenuItem, Theme } from '@fluentui/react';\nimport { insertTableMenuTablePane, ribbonTableButtonStyle } from '../../../styles/RichTextEditor.styles';\nimport { RichTextInsertTablePane } from './RichTextInsertTablePane';\nimport { ColumnRowReplaceString, parseKey } from '../../../utils/RichTextTableUtils';\nimport type { IEditor } from 'roosterjs-editor-types-compatible';\n\n// This file uses RoosterJS React package implementation with updates to UI components and styles.\n\n/*\n \"Insert table\" button for the RoosterJS ribbon\n */\nexport const insertTableButton = (\n theme: Theme,\n maxRowsNumber: number,\n maxColumnsNumber: number\n): RibbonButton<string> => {\n return {\n key: 'buttonNameInsertTable',\n unlocalizedText: 'Insert table',\n // Icon will be set in onRenderIcon callback\n iconName: '',\n onClick: (editor: IEditor, key: string) => {\n const { row, column } = parseKey(key);\n insertTableAction(editor, column, row);\n },\n dropDownMenu: {\n items: {\n // the key of the item is also used as a key for localization\n insertTablePane: `Insert ${ColumnRowReplaceString} table`\n },\n itemRender: (\n item: IContextualMenuItem,\n onClick: (e: React.MouseEvent<Element> \| React.KeyboardEvent<Element>, item: IContextualMenuItem) => void\n ) => {\n return (\n <RichTextInsertTablePane\n item={item}\n onClick={onClick}\n ~~theme={theme}\n~~ maxColumnsNumber={maxColumnsNumber}\n maxRowsNumber={maxRowsNumber}\n />\n );\n },\n commandBarSubMenuProperties: {\n className: insertTableMenuTablePane\n }\n },\n commandBarProperties: {\n // hide the chevron icon\n menuIconProps: {\n hidden: true\n },\n onRenderIcon: () => {\n return <TableIcon />;\n },\n buttonStyles: ribbonTableButtonStyle(theme),\n canCheck: false\n }\n };\n};\n\nconst TableIcon = (): JSX.Element => {\n return (\n // update the visibility of the Table Icon with css classes that are triggered by command bar's state\n <Stack>\n <Icon iconName=\"RichTextInsertTableFilledIcon\" className={'ribbon-table-button-filled-icon'} />\n <Icon iconName=\"RichTextInsertTableRegularIcon\" className={'ribbon-table-button-regular-icon'} />\n </Stack>\n );\n};\n"]}
1	+ {"version":3,"file":"RichTextInsertTableButton.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTableButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAGvE,OAAO,EAAE,wBAAwB,EAAE,sBAAsB,EAAE,MAAM,uCAAuC,CAAC;AACzG,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAGrF,kGAAkG;AAElG;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAY,EACZ,aAAqB,EACrB,gBAAwB,EACF,EAAE;IACxB,OAAO;QACL,GAAG,EAAE,uBAAuB;QAC5B,eAAe,EAAE,cAAc;QAC/B,4CAA4C;QAC5C,QAAQ,EAAE,EAAE;QACZ,OAAO,EAAE,CAAC,MAAe,EAAE,GAAW,EAAE,EAAE;YACxC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;YACtC,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;QACzC,CAAC;QACD,YAAY,EAAE;YACZ,KAAK,EAAE;gBACL,6DAA6D;gBAC7D,eAAe,EAAE,UAAU,sBAAsB,QAAQ;aAC1D;YACD,UAAU,EAAE,CACV,IAAyB,EACzB,OAAyG,EACzG,EAAE;gBACF,OAAO,CACL,oBAAC,uBAAuB,IACtB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC;YACJ,CAAC;YACD,2BAA2B,EAAE;gBAC3B,SAAS,EAAE,wBAAwB;aACpC;SACF;QACD,oBAAoB,EAAE;YACpB,wBAAwB;YACxB,aAAa,EAAE;gBACb,MAAM,EAAE,IAAI;aACb;YACD,YAAY,EAAE,GAAG,EAAE;gBACjB,OAAO,oBAAC,SAAS,OAAG,CAAC;YACvB,CAAC;YACD,YAAY,EAAE,sBAAsB,CAAC,KAAK,CAAC;YAC3C,QAAQ,EAAE,KAAK;SAChB;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAgB,EAAE;IAClC,OAAO;IACL,qGAAqG;IACrG,oBAAC,KAAK;QACJ,oBAAC,IAAI,IAAC,QAAQ,EAAC,+BAA+B,EAAC,SAAS,EAAE,iCAAiC,GAAI;QAC/F,oBAAC,IAAI,IAAC,QAAQ,EAAC,gCAAgC,EAAC,SAAS,EAAE,kCAAkC,GAAI,CAC3F,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { Icon, Stack } from '@fluentui/react';\nimport { insertTable as insertTableAction } from './insertTableAction';\nimport type { RibbonButton } from 'roosterjs-react';\nimport type { IContextualMenuItem, Theme } from '@fluentui/react';\nimport { insertTableMenuTablePane, ribbonTableButtonStyle } from '../../../styles/RichTextEditor.styles';\nimport { RichTextInsertTablePane } from './RichTextInsertTablePane';\nimport { ColumnRowReplaceString, parseKey } from '../../../utils/RichTextTableUtils';\nimport type { IEditor } from 'roosterjs-editor-types-compatible';\n\n// This file uses RoosterJS React package implementation with updates to UI components and styles.\n\n/*\n \"Insert table\" button for the RoosterJS ribbon\n */\nexport const insertTableButton = (\n theme: Theme,\n maxRowsNumber: number,\n maxColumnsNumber: number\n): RibbonButton<string> => {\n return {\n key: 'buttonNameInsertTable',\n unlocalizedText: 'Insert table',\n // Icon will be set in onRenderIcon callback\n iconName: '',\n onClick: (editor: IEditor, key: string) => {\n const { row, column } = parseKey(key);\n insertTableAction(editor, column, row);\n },\n dropDownMenu: {\n items: {\n // the key of the item is also used as a key for localization\n insertTablePane: `Insert ${ColumnRowReplaceString} table`\n },\n itemRender: (\n item: IContextualMenuItem,\n onClick: (e: React.MouseEvent<Element> \| React.KeyboardEvent<Element>, item: IContextualMenuItem) => void\n ) => {\n return (\n <RichTextInsertTablePane\n item={item}\n onClick={onClick}\n maxColumnsNumber={maxColumnsNumber}\n maxRowsNumber={maxRowsNumber}\n />\n );\n },\n commandBarSubMenuProperties: {\n className: insertTableMenuTablePane\n }\n },\n commandBarProperties: {\n // hide the chevron icon\n menuIconProps: {\n hidden: true\n },\n onRenderIcon: () => {\n return <TableIcon />;\n },\n buttonStyles: ribbonTableButtonStyle(theme),\n canCheck: false\n }\n };\n};\n\nconst TableIcon = (): JSX.Element => {\n return (\n // update the visibility of the Table Icon with css classes that are triggered by command bar's state\n <Stack>\n <Icon iconName=\"RichTextInsertTableFilledIcon\" className={'ribbon-table-button-filled-icon'} />\n <Icon iconName=\"RichTextInsertTableRegularIcon\" className={'ribbon-table-button-regular-icon'} />\n </Stack>\n );\n};\n"]}

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTablePane.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import React from 'react';
-import type { IContextualMenuItem, Theme } from '@fluentui/react';
+import type { IContextualMenuItem } from '@fluentui/react';
 interface RichTextInsertTablePaneProps {
-    theme: Theme;
     item: IContextualMenuItem;
     onClick: (e: React.MouseEvent<Element> | React.KeyboardEvent<Element>, item: IContextualMenuItem) => void;
     maxRowsNumber: number;

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTablePane.js CHANGED Viewed

@@ -4,6 +4,7 @@ import React, { useMemo } from 'react';
 import { FocusZone, FocusZoneDirection, mergeStyles } from '@fluentui/react';
 import { insertTableMenuCellButtonSelectedStyles, insertTableMenuCellButtonStyles, insertTableMenuFocusZone, insertTableMenuTitleStyles } from '../../../styles/RichTextEditor.styles';
 import { ColumnRowReplaceString, createKey } from '../../../utils/RichTextTableUtils';
+import { useTheme } from '../../../../theming';
 // This file uses RoosterJS React package implementation with updates to UI components and styles.
 const RowColumnInitialValue = 0;
 /**
@@ -11,9 +12,10 @@ const RowColumnInitialValue = 0;
  * Component for the insert table pane
  */
 export const RichTextInsertTablePane = (props) => {
-    const { item, onClick, theme, maxColumnsNumber, maxRowsNumber } = props;
+    const { item, onClick, maxColumnsNumber, maxRowsNumber } = props;
     const [column, setColumn] = React.useState(RowColumnInitialValue);
     const [row, setRow] = React.useState(RowColumnInitialValue);
+    const theme = useTheme();
     const updateSize = React.useCallback((target) => {
         if (target !== undefined && target.dataset.column !== undefined && target.dataset.row !== undefined) {
             const column = parseInt(target.dataset.column);
@@ -40,7 +42,7 @@ export const RichTextInsertTablePane = (props) => {
             for (let j = 0; j < maxColumnsNumber; j++) {
                 const key = `cell_${i}_${j}`;
                 const isSelected = j <= column && i <= row;
-                items.push(React.createElement("button", { className: mergeStyles(insertTableMenuCellButtonStyles(theme), isSelected ? insertTableMenuCellButtonSelectedStyles(theme) : undefined), onClick: onClickButton, key: key, id: key, "data-column": j, "data-row": i, "data-is-focusable": true, onMouseEnter: onMouseEnter, "aria-label": formatText((_a = item.text) !== null && _a !== void 0 ? _a : '', i, j) }));
+                items.push(React.createElement("button", { className: mergeStyles(insertTableMenuCellButtonStyles(theme), isSelected ? insertTableMenuCellButtonSelectedStyles(theme) : undefined), onClick: onClickButton, key: key, id: key, "data-column": j, "data-row": i, "data-is-focusable": true, onMouseEnter: onMouseEnter, "aria-label": formatText((_a = item.text) !== null && _a !== void 0 ? _a : '', formatRowColumnText(i), formatRowColumnText(j)), "data-testid": key }));
             }
         }
         return items;

package/dist/dist-esm/react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTablePane.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextInsertTablePane.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTablePane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EACL,uCAAuC,EACvC,+BAA+B,EAC/B,wBAAwB,EACxB,0BAA0B,EAC3B,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;~~AAEtF~~,kGAAkG;AAClG,MAAM,qBAAqB,GAAG,CAAC,CAAC;~~AAUhC~~;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAmC,EAAe,EAAE;IAC1F,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,~~KAAK,EAAE,~~gBAAgB,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;~~IACxE~~,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC;IAClE,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC;~~IAE5D~~,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAClC,CAAC,MAAoB,EAAE,EAAE;QACvB,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YACpG,MAAM,MAAM,GAAG,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YAC/C,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YAEzC,IACE,MAAM,IAAI,qBAAqB;gBAC/B,MAAM,GAAG,gBAAgB;gBACzB,GAAG,IAAI,qBAAqB;gBAC5B,GAAG,GAAG,aAAa,EACnB,CAAC;gBACD,SAAS,CAAC,MAAM,CAAC,CAAC;gBAClB,MAAM,CAAC,GAAG,CAAC,CAAC;YACd,CAAC;QACH,CAAC;IACH,CAAC,EACD,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAClC,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CACpC,CAAC,CAAsC,EAAE,EAAE;QACzC,UAAU,CAAC,CAAC,CAAC,MAAqB,CAAC,CAAC;IACtC,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACrC,CAAC,CAAsC,EAAE,EAAE;QACzC,OAAO,CAAC,CAAC,kCACJ,IAAI,KACP,GAAG,EAAE,SAAS,CAAC,mBAAmB,CAAC,GAAG,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,IACrE,CAAC;IACL,CAAC,EACD,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,CAC7B,CAAC;IAEF,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;;QAC/B,MAAM,KAAK,GAAkB,EAAE,CAAC;QAEhC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,EAAE,EAAE,CAAC;YACvC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,gBAAgB,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC1C,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC7B,MAAM,UAAU,GAAG,CAAC,IAAI,MAAM,IAAI,CAAC,IAAI,GAAG,CAAC;gBAC3C,KAAK,CAAC,IAAI,CACR,gCACE,SAAS,EAAE,WAAW,CACpB,+BAA+B,CAAC,KAAK,CAAC,EACtC,UAAU,CAAC,CAAC,CAAC,uCAAuC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CACxE,EACD,OAAO,EAAE,aAAa,EACtB,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,GAAG,iBACM,CAAC,cACJ,CAAC,uBACQ,IAAI,EACvB,YAAY,EAAE,YAAY,gBACd,UAAU,CAAC,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,~~GAC7C~~,CACH,CAAC;YACJ,CAAC;QACH,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,aAAa,EAAE,gBAAgB,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAElG,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;;QACxB,OAAO,UAAU,CAAC,MAAA,IAAI,CAAC,IAAI,mCAAI,EAAE,EAAE,mBAAmB,CAAC,GAAG,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5F,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL;QACE,6BAAK,SAAS,EAAE,0BAA0B,IAAG,IAAI,CAAO;QACxD,oBAAC,SAAS,IACR,sBAAsB,EAAE,QAAQ,qBAAqB,IAAI,qBAAqB,EAAE,EAChF,SAAS,EAAE,kBAAkB,CAAC,aAAa,EAC3C,sBAAsB,EAAE,UAAU,EAClC,SAAS,EAAE,wBAAwB,CAAC,KAAK,CAAC,IAEzC,KAAK,CACI,CACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,GAAW,EAAE,MAAc,EAAU,EAAE;IACvE,OAAO,IAAI,CAAC,OAAO,CAAC,GAAG,sBAAsB,EAAE,EAAE,GAAG,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;AAC/F,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,KAAa,EAAU,EAAE;IACpD,OAAO,KAAK,GAAG,CAAC,CAAC;AACnB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport { FocusZone, FocusZoneDirection, mergeStyles } from '@fluentui/react';\nimport type { IContextualMenuItem, ~~Theme~~ } from '@fluentui/react';\nimport {\n insertTableMenuCellButtonSelectedStyles,\n insertTableMenuCellButtonStyles,\n insertTableMenuFocusZone,\n insertTableMenuTitleStyles\n} from '../../../styles/RichTextEditor.styles';\nimport { ColumnRowReplaceString, createKey } from '../../../utils/RichTextTableUtils';\n\n// This file uses RoosterJS React package implementation with updates to UI components and styles.\nconst RowColumnInitialValue = 0;\n\ninterface RichTextInsertTablePaneProps {\n ~~theme: Theme;\n~~ item: IContextualMenuItem;\n onClick: (e: React.MouseEvent<Element> \| React.KeyboardEvent<Element>, item: IContextualMenuItem) => void;\n maxRowsNumber: number;\n maxColumnsNumber: number;\n}\n\n/*\n @private\n * Component for the insert table pane\n */\nexport const RichTextInsertTablePane = (props: RichTextInsertTablePaneProps): JSX.Element => {\n const { item, onClick, ~~theme,~~ maxColumnsNumber, maxRowsNumber } = props;\n const [column, setColumn] = React.useState(RowColumnInitialValue);\n const [row, setRow] = React.useState(RowColumnInitialValue);\n\n const updateSize = React.useCallback(\n (target?: HTMLElement) => {\n if (target !== undefined && target.dataset.column !== undefined && target.dataset.row !== undefined) {\n const column = parseInt(target.dataset.column);\n const row = parseInt(target.dataset.row);\n\n if (\n column >= RowColumnInitialValue &&\n column < maxColumnsNumber &&\n row >= RowColumnInitialValue &&\n row < maxRowsNumber\n ) {\n setColumn(column);\n setRow(row);\n }\n }\n },\n [maxColumnsNumber, maxRowsNumber]\n );\n\n const onMouseEnter = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n updateSize(e.target as HTMLElement);\n },\n [updateSize]\n );\n\n const onClickButton = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick(e, {\n ...item,\n key: createKey(formatRowColumnText(row), formatRowColumnText(column))\n });\n },\n [row, column, onClick, item]\n );\n\n const items = React.useMemo(() => {\n const items: JSX.Element[] = [];\n\n for (let i = 0; i < maxRowsNumber; i++) {\n for (let j = 0; j < maxColumnsNumber; j++) {\n const key = `cell_${i}_${j}`;\n const isSelected = j <= column && i <= row;\n items.push(\n <button\n className={mergeStyles(\n insertTableMenuCellButtonStyles(theme),\n isSelected ? insertTableMenuCellButtonSelectedStyles(theme) : undefined\n )}\n onClick={onClickButton}\n key={key}\n id={key}\n data-column={j}\n data-row={i}\n data-is-focusable={true}\n onMouseEnter={onMouseEnter}\n aria-label={formatText(item.text ?? '', i, j)}\n />\n );\n }\n }\n\n return items;\n }, [maxRowsNumber, maxColumnsNumber, column, row, theme, onClickButton, onMouseEnter, item.text]);\n\n const text = useMemo(() => {\n return formatText(item.text ?? '', formatRowColumnText(row), formatRowColumnText(column));\n }, [column, item.text, row]);\n\n return (\n <div>\n <div className={insertTableMenuTitleStyles}>{text}</div>\n <FocusZone\n defaultTabbableElement={`cell_${RowColumnInitialValue}_${RowColumnInitialValue}`}\n direction={FocusZoneDirection.bidirectional}\n onActiveElementChanged={updateSize}\n className={insertTableMenuFocusZone(theme)}\n >\n {items}\n </FocusZone>\n </div>\n );\n};\n\nconst formatText = (text: string, row: number, column: number): string => {\n return text.replace(`${ColumnRowReplaceString}`, `${column.toString()} x ${row.toString()}`);\n};\n\nconst formatRowColumnText = (value: number): number => {\n return value + 1;\n};\n"]}
1	+ {"version":3,"file":"RichTextInsertTablePane.js","sourceRoot":"","sources":["../../../../../../../../../react-components/src/components/RichTextEditor/Buttons/Table/RichTextInsertTablePane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport { FocusZone, FocusZoneDirection, mergeStyles } from '@fluentui/react';\nimport type { IContextualMenuItem } from '@fluentui/react';\nimport {\n insertTableMenuCellButtonSelectedStyles,\n insertTableMenuCellButtonStyles,\n insertTableMenuFocusZone,\n insertTableMenuTitleStyles\n} from '../../../styles/RichTextEditor.styles';\nimport { ColumnRowReplaceString, createKey } from '../../../utils/RichTextTableUtils';\nimport { useTheme } from '../../../../theming';\n\n// This file uses RoosterJS React package implementation with updates to UI components and styles.\nconst RowColumnInitialValue = 0;\n\ninterface RichTextInsertTablePaneProps {\n item: IContextualMenuItem;\n onClick: (e: React.MouseEvent<Element> \| React.KeyboardEvent<Element>, item: IContextualMenuItem) => void;\n maxRowsNumber: number;\n maxColumnsNumber: number;\n}\n\n/*\n @private\n * Component for the insert table pane\n */\nexport const RichTextInsertTablePane = (props: RichTextInsertTablePaneProps): JSX.Element => {\n const { item, onClick, maxColumnsNumber, maxRowsNumber } = props;\n const [column, setColumn] = React.useState(RowColumnInitialValue);\n const [row, setRow] = React.useState(RowColumnInitialValue);\n const theme = useTheme();\n\n const updateSize = React.useCallback(\n (target?: HTMLElement) => {\n if (target !== undefined && target.dataset.column !== undefined && target.dataset.row !== undefined) {\n const column = parseInt(target.dataset.column);\n const row = parseInt(target.dataset.row);\n\n if (\n column >= RowColumnInitialValue &&\n column < maxColumnsNumber &&\n row >= RowColumnInitialValue &&\n row < maxRowsNumber\n ) {\n setColumn(column);\n setRow(row);\n }\n }\n },\n [maxColumnsNumber, maxRowsNumber]\n );\n\n const onMouseEnter = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n updateSize(e.target as HTMLElement);\n },\n [updateSize]\n );\n\n const onClickButton = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick(e, {\n ...item,\n key: createKey(formatRowColumnText(row), formatRowColumnText(column))\n });\n },\n [row, column, onClick, item]\n );\n\n const items = React.useMemo(() => {\n const items: JSX.Element[] = [];\n\n for (let i = 0; i < maxRowsNumber; i++) {\n for (let j = 0; j < maxColumnsNumber; j++) {\n const key = `cell_${i}_${j}`;\n const isSelected = j <= column && i <= row;\n items.push(\n <button\n className={mergeStyles(\n insertTableMenuCellButtonStyles(theme),\n isSelected ? insertTableMenuCellButtonSelectedStyles(theme) : undefined\n )}\n onClick={onClickButton}\n key={key}\n id={key}\n data-column={j}\n data-row={i}\n data-is-focusable={true}\n onMouseEnter={onMouseEnter}\n aria-label={formatText(item.text ?? '', formatRowColumnText(i), formatRowColumnText(j))}\n data-testid={key}\n />\n );\n }\n }\n\n return items;\n }, [maxRowsNumber, maxColumnsNumber, column, row, theme, onClickButton, onMouseEnter, item.text]);\n\n const text = useMemo(() => {\n return formatText(item.text ?? '', formatRowColumnText(row), formatRowColumnText(column));\n }, [column, item.text, row]);\n\n return (\n <div>\n <div className={insertTableMenuTitleStyles}>{text}</div>\n <FocusZone\n defaultTabbableElement={`cell_${RowColumnInitialValue}_${RowColumnInitialValue}`}\n direction={FocusZoneDirection.bidirectional}\n onActiveElementChanged={updateSize}\n className={insertTableMenuFocusZone(theme)}\n >\n {items}\n </FocusZone>\n </div>\n );\n};\n\nconst formatText = (text: string, row: number, column: number): string => {\n return text.replace(`${ColumnRowReplaceString}`, `${column.toString()} x ${row.toString()}`);\n};\n\nconst formatRowColumnText = (value: number): number => {\n return value + 1;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js CHANGED Viewed

@@ -38,6 +38,7 @@ import { useTrackedCapabilityChangedNotifications } from './utils/TrackCapabilit
 import { useEndedCallConsoleErrors } from './utils/useConsoleErrors';
 /* @conditional-compile-remove(end-of-call-survey) */
 import { SurveyPage } from './pages/SurveyPage';
+import { useAudio } from '../common/AudioProvider';
 const isShowing = (overrideSidePane) => {
     return !!(overrideSidePane === null || overrideSidePane === void 0 ? void 0 : overrideSidePane.isActive);
 };
@@ -96,7 +97,7 @@ const MainScreen = (props) => {
             adapter.off('callEnded', closeSidePane);
         };
     }, [adapter]);
-    const compositeAudioContext = useRef(new AudioContext());
+    const compositeAudioContext = useAudio();
     const capabilitiesChangedInfoAndRole = useSelector(capabilitiesChangedInfoAndRoleSelector);
     const capabilitiesChangedNotificationBarProps = useTrackedCapabilityChangedNotifications(capabilitiesChangedInfoAndRole);
     // Track the last dismissed errors of any error kind to prevent errors from re-appearing on subsequent page navigation
@@ -171,7 +172,7 @@ const MainScreen = (props) => {
             pageElement = (React.createElement(TransferPage, { mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onFetchAvatarPersonaData: onFetchAvatarPersonaData, latestErrors: latestErrors, onDismissError: onDismissError, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps }));
             break;
         case 'call':
-            pageElement = (React.createElement(CallPage, { callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: props.onCloseChatPane, latestErrors: latestErrors, onDismissError: onDismissError, galleryLayout: userSetGalleryLayout, onUserSetGalleryLayoutChange: setUserSetGalleryLayout, onSetUserSetOverflowGalleryPosition: setUserSetOverflowGalleryPosition, userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, pinnedParticipants: pinnedParticipants, setPinnedParticipants: setPinnedParticipants, compositeAudioContext: compositeAudioContext.current }));
+            pageElement = (React.createElement(CallPage, { callInvitationURL: callInvitationUrl, onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: onFetchParticipantMenuItems, mobileView: props.mobileView, modalLayerHostId: props.modalLayerHostId, options: props.options, updateSidePaneRenderer: setSidePaneRenderer, mobileChatTabHeader: props.mobileChatTabHeader, onCloseChatPane: props.onCloseChatPane, latestErrors: latestErrors, onDismissError: onDismissError, galleryLayout: userSetGalleryLayout, onUserSetGalleryLayoutChange: setUserSetGalleryLayout, onSetUserSetOverflowGalleryPosition: setUserSetOverflowGalleryPosition, userSetOverflowGalleryPosition: userSetOverflowGalleryPosition, capabilitiesChangedNotificationBarProps: capabilitiesChangedNotificationBarProps, pinnedParticipants: pinnedParticipants, setPinnedParticipants: setPinnedParticipants, compositeAudioContext: compositeAudioContext }));
             break;
         /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
         case 'hold':

package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/CallComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport {\n ActiveErrorMessage,\n ErrorBar,\n ParticipantMenuItemsCallback,\n useTheme,\n VideoTilesOptions\n} from '@internal/react-components';\n/* @conditional-compile-remove(end-of-call-survey) /\nimport { CallSurveyImprovementSuggestions } from '@internal/react-components';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallCompositeIcons } from '../common/icons';\nimport { useLocale } from '../localization';\nimport { CommonCallAdapter, StartCallIdentifier } from './adapter/CallAdapter';\nimport { CallAdapterProvider, useAdapter } from './adapter/CallAdapterProvider';\nimport { CallPage } from './pages/CallPage';\nimport { ConfigurationPage } from './pages/ConfigurationPage';\nimport { NoticePage } from './pages/NoticePage';\nimport { useSelector } from './hooks/useSelector';\nimport { getEndedCall, getPage, getTargetCallees } from './selectors/baseSelectors';\nimport { LobbyPage } from './pages/LobbyPage';\nimport { TransferPage } from './pages/TransferPage';\nimport {\n leavingPageStyle,\n mainScreenContainerStyleDesktop,\n mainScreenContainerStyleMobile\n} from './styles/CallComposite.styles';\nimport { CallControlOptions } from './types/CallControlOptions';\n\nimport { LayerHost, mergeStyles } from '@fluentui/react';\nimport { modalLayerHostStyle } from '../common/styles/ModalLocalAndRemotePIP.styles';\nimport { useId } from '@fluentui/react-hooks';\n/ @conditional-compile-remove(one-to-n-calling) / / @conditional-compile-remove(PSTN-calls) /\nimport { HoldPage } from './pages/HoldPage';\n/ @conditional-compile-remove(unsupported-browser) /\nimport { UnsupportedBrowserPage } from './pages/UnsupportedBrowser';\n/ @conditional-compile-remove(end-of-call-survey) /\nimport { CallSurvey } from '@azure/communication-calling';\nimport { ParticipantRole, PermissionConstraints } from '@azure/communication-calling';\nimport { MobileChatSidePaneTabHeaderProps } from '../common/TabHeader';\nimport { InjectedSidePaneProps, SidePaneProvider, SidePaneRenderer } from './components/SidePane/SidePaneProvider';\nimport {\n filterLatestErrors,\n getEndedCallPageProps,\n trackErrorAsDismissed,\n updateTrackedErrorsWithActiveErrors\n} from './utils';\nimport { TrackedErrors } from './types/ErrorTracking';\nimport { usePropsFor } from './hooks/usePropsFor';\nimport { deviceCountSelector } from './selectors/deviceCountSelector';\nimport { VideoGalleryLayout } from '@internal/react-components';\n\nimport { capabilitiesChangedInfoAndRoleSelector } from './selectors/capabilitiesChangedInfoAndRoleSelector';\n\nimport { useTrackedCapabilityChangedNotifications } from './utils/TrackCapabilityChangedNotifications';\nimport { useEndedCallConsoleErrors } from './utils/useConsoleErrors';\n/ @conditional-compile-remove(end-of-call-survey) /\nimport { SurveyPage } from './pages/SurveyPage';\n\n/\n Props for {@link CallComposite}.\n \n @public\n /\nexport interface CallCompositeProps extends BaseCompositeProps<CallCompositeIcons> {\n /\n An adapter provides logic and data to the composite.\n * Composite can also be controlled using the adapter.\n /\n adapter: CommonCallAdapter;\n /\n Optimizes the composite form factor for either desktop or mobile.\n * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.\n * @defaultValue 'desktop'\n /\n formFactor?: 'desktop' \| 'mobile';\n /\n URL to invite new participants to the current call. If this is supplied, a button appears in the Participants\n * Button flyout menu.\n /\n callInvitationUrl?: string;\n /\n Flags to enable/disable or customize UI elements of the {@link CallComposite}.\n /\n options?: CallCompositeOptions;\n}\n\n/ @conditional-compile-remove(call-readiness) /\n/\n Device Checks.\n * Choose whether or not to block starting a call depending on camera and microphone permission options.\n \n @beta\n /\nexport interface DeviceCheckOptions {\n /\n Camera Permission prompts for your call.\n * 'required' - requires the permission to be allowed before permitting the user join the call.\n * 'optional' - permission can be disallowed and the user is still permitted to join the call.\n * 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.\n /\n camera: 'required' \| 'optional' \| 'doNotPrompt';\n /\n Microphone permission prompts for your call.\n * 'required' - requires the permission to be allowed before permitting the user join the call.\n * 'optional' - permission can be disallowed and the user is still permitted to join the call.\n * 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.\n /\n microphone: 'required' \| 'optional' \| 'doNotPrompt';\n}\n\n/\n Menu options for remote video tiles in {@link VideoGallery}.\n \n @public\n /\nexport interface RemoteVideoTileMenuOptions {\n /\n If set to true, remote video tiles in the VideoGallery will not have menu options\n \n @defaultValue false\n /\n isHidden?: boolean;\n}\n\n/\n Options for the local video tile in the Call composite.\n \n @public\n /\nexport interface LocalVideoTileOptions {\n /\n Position of the local video tile. If unset will render the local tile in the floating local position.\n \n @defaultValue 'floating'\n * @remarks 'grid' - local video tile will be rendered in the grid view of the videoGallery.\n * 'floating' - local video tile will be rendered in the floating position and will observe overflow gallery\n * local video tile rules and be docked in the bottom corner.\n * This does not affect the Configuration screen or the side pane Picture in Picture in Picture view.\n /\n position?: 'grid' \| 'floating';\n}\n/\n Optional features of the {@link CallComposite}.\n \n @public\n /\nexport type CallCompositeOptions = {\n /\n Surface Azure Communication Services backend errors in the UI with {@link @azure/communication-react#ErrorBar}.\n * Hide or show the error bar.\n * @defaultValue true\n /\n errorBar?: boolean;\n /\n Hide or Customize the control bar element.\n * Can be customized by providing an object of type {@link @azure/communication-react#CallControlOptions}.\n * @defaultValue true\n /\n callControls?: boolean \| CallControlOptions;\n / @conditional-compile-remove(call-readiness) /\n /\n Device permissions check options for your call.\n * Here you can choose what device permissions you prompt the user for,\n * as well as what device permissions must be accepted before starting a call.\n /\n deviceChecks?: DeviceCheckOptions;\n / @conditional-compile-remove(call-readiness) /\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 / @conditional-compile-remove(call-readiness) /\n /\n Callback you may provide to supply users with further steps to troubleshoot why they have been\n * having network issues when connecting to the 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 / @conditional-compile-remove(unsupported-browser) /\n /\n Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.\n \n @example\n * ```ts\n * onBrowserTroubleShootingClick?: () =>\n * window.open('https://contoso.com/browser-troubleshooting', '_blank');\n * ```\n \n @remarks\n * if this is not supplied, the composite will not show a unsupported browser page.\n /\n onEnvironmentInfoTroubleshootingClick?: () => void;\n /\n Remote participant video tile menu options\n /\n remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n /\n Options for controlling the local video tile.\n \n @remarks if 'false' the local video tile will not be rendered.\n /\n localVideoTile?: boolean \| LocalVideoTileOptions;\n /\n Options for controlling video tile.\n /\n videoTilesOptions?: VideoTilesOptions;\n /\n Options for controlling the starting layout of the composite's video gallery\n /\n galleryOptions?: {\n /\n Layout for the gallery when the call starts\n /\n layout?: VideoGalleryLayout;\n };\n / @conditional-compile-remove(end-of-call-survey) /\n /\n Options for end of call survey\n /\n surveyOptions?: {\n /\n Disable call survey at the end of a call.\n * @defaultValue false\n /\n disableSurvey?: boolean;\n /\n Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided\n * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey\n /\n onSurveyClosed?: (surveyState: 'sent' \| 'skipped' \| 'error', surveyError?: string) => void;\n /\n Optional callback to handle survey data including free form text response\n * Note that free form text response survey option is only going to be enabled when this callback is provided\n * User will need to handle all free form text response on their own\n /\n onSurveySubmitted?: (\n callId: string,\n surveyId: string,\n /\n This is the survey results containing star survey data and API tag survey data.\n * This part of the result will always be sent to the calling sdk\n * This callback provides user with the ability to gain access to survey data\n /\n submittedSurvey: CallSurvey,\n /\n This is the survey results containing free form text\n * This part of the result will not be handled by composites\n * User will need to collect and handle this information 100% on their own\n * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n /\n improvementSuggestions: CallSurveyImprovementSuggestions\n ) => Promise<void>;\n };\n /\n Options for setting additional customizations related to personalized branding.\n /\n branding?: {\n /\n Logo displayed on the configuration page.\n /\n logo?: {\n /\n URL for the logo image.\n \n @remarks\n * Recommended size is 80x80 pixels.\n /\n url: string;\n /\n Alt text for the logo image.\n /\n alt?: string;\n /\n The logo can be displayed as a circle.\n \n @defaultValue 'unset'\n /\n shape?: 'unset' \| 'circle';\n };\n /\n Background image displayed on the configuration page.\n /\n backgroundImage?: {\n /\n URL for the background image.\n \n @remarks\n * Background image should be larger than 576x567 pixels and smaller than 2048x2048 pixels pixels.\n /\n url: string;\n };\n };\n / @conditional-compile-remove(spotlight) /\n /\n Options for settings related to spotlight.\n /\n spotlight?: {\n /\n Flag to hide the menu buttons to start and stop spotlight for remote participants and the local participant.\n * @defaultValue false\n /\n hideSpotlightButtons?: boolean;\n };\n};\n\ntype MainScreenProps = {\n mobileView: boolean;\n modalLayerHostId: string;\n callInvitationUrl?: string;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n options?: CallCompositeOptions;\n overrideSidePane?: InjectedSidePaneProps;\n onSidePaneIdChange?: (sidePaneId: string \| undefined) => void;\n mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n onCloseChatPane?: () => void;\n};\n\nconst isShowing = (overrideSidePane?: InjectedSidePaneProps): boolean => {\n return !!overrideSidePane?.isActive;\n};\n\nconst MainScreen = (props: MainScreenProps): JSX.Element => {\n const adapter = useAdapter();\n const { camerasCount, microphonesCount } = useSelector(deviceCountSelector);\n const hasCameras = camerasCount > 0;\n const hasMicrophones = microphonesCount > 0;\n\n useEffect(() => {\n (async () => {\n const constrain = getQueryOptions({\n role: adapter.getState().call?.role\n });\n await adapter.askDevicePermission(constrain);\n adapter.queryCameras();\n adapter.queryMicrophones();\n adapter.querySpeakers();\n })();\n }, [\n adapter,\n // Ensure we re-ask for permissions if the number of devices goes from 0 -> n during a call\n // as we cannot request permissions when there are no devices.\n hasCameras,\n hasMicrophones\n ]);\n\n const { callInvitationUrl, onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;\n const page = useSelector(getPage);\n const endedCall = useSelector(getEndedCall);\n\n const [sidePaneRenderer, setSidePaneRenderer] = React.useState<SidePaneRenderer \| undefined>();\n const [injectedSidePaneProps, setInjectedSidePaneProps] = React.useState<InjectedSidePaneProps>();\n const [userSetGalleryLayout, setUserSetGalleryLayout] = useState<VideoGalleryLayout>(\n props.options?.galleryOptions?.layout ?? 'floatingLocalVideo'\n );\n const [userSetOverflowGalleryPosition, setUserSetOverflowGalleryPosition] = useState<'Responsive' \| 'horizontalTop'>(\n 'Responsive'\n );\n\n const overridePropsRef = useRef<InjectedSidePaneProps \| undefined>(props.overrideSidePane);\n useEffect(() => {\n setInjectedSidePaneProps(props.overrideSidePane);\n // When the injected side pane is opened, clear the previous side pane active state.\n // this ensures when the injected side pane is \"closed\", the previous side pane is not \"re-opened\".\n if (!isShowing(overridePropsRef.current) && isShowing(props.overrideSidePane)) {\n setSidePaneRenderer(undefined);\n }\n overridePropsRef.current = props.overrideSidePane;\n }, [props.overrideSidePane]);\n\n const onSidePaneIdChange = props.onSidePaneIdChange;\n useEffect(() => {\n onSidePaneIdChange?.(sidePaneRenderer?.id);\n }, [sidePaneRenderer?.id, onSidePaneIdChange]);\n\n // When the call ends ensure the side pane is set to closed to prevent the side pane being open if the call is re-joined.\n useEffect(() => {\n const closeSidePane = (): void => {\n setSidePaneRenderer(undefined);\n };\n adapter.on('callEnded', closeSidePane);\n return () => {\n adapter.off('callEnded', closeSidePane);\n };\n }, [adapter]);\n\n const compositeAudioContext = useRef<AudioContext>(new AudioContext());\n\n const capabilitiesChangedInfoAndRole = useSelector(capabilitiesChangedInfoAndRoleSelector);\n\n const capabilitiesChangedNotificationBarProps =\n useTrackedCapabilityChangedNotifications(capabilitiesChangedInfoAndRole);\n\n // Track the last dismissed errors of any error kind to prevent errors from re-appearing on subsequent page navigation\n // This works by tracking the most recent timestamp of any active error type.\n // And then tracking when that error type was last dismissed.\n const activeErrors = usePropsFor(ErrorBar).activeErrorMessages;\n const [trackedErrors, setTrackedErrors] = useState<TrackedErrors>({} as TrackedErrors);\n useEffect(() => {\n setTrackedErrors((prev) => updateTrackedErrorsWithActiveErrors(prev, activeErrors));\n }, [activeErrors]);\n const onDismissError = useCallback((error: ActiveErrorMessage) => {\n setTrackedErrors((prev) => trackErrorAsDismissed(error.type, prev));\n }, []);\n const latestErrors = useMemo(() => filterLatestErrors(activeErrors, trackedErrors), [activeErrors, trackedErrors]);\n const callees = useSelector(getTargetCallees) as StartCallIdentifier[];\n const locale = useLocale();\n const palette = useTheme().palette;\n / @conditional-compile-remove(PSTN-calls) /\n const alternateCallerId = adapter.getState().alternateCallerId;\n const leavePageStyle = useMemo(() => leavingPageStyle(palette), [palette]);\n let pageElement: JSX.Element \| undefined;\n const [pinnedParticipants, setPinnedParticipants] = useState<string[]>([]);\n switch (page) {\n case 'configuration':\n pageElement = (\n <ConfigurationPage\n mobileView={props.mobileView}\n startCallHandler={(): void => {\n if (callees) {\n adapter.startCall(\n callees,\n / @conditional-compile-remove(PSTN-calls) / alternateCallerId\n ? { alternateCallerId: { phoneNumber: alternateCallerId } }\n : {}\n );\n } else {\n adapter.joinCall({\n microphoneOn: 'keep',\n cameraOn: 'keep'\n });\n }\n }}\n updateSidePaneRenderer={setSidePaneRenderer}\n latestErrors={latestErrors}\n onDismissError={onDismissError}\n modalLayerHostId={props.modalLayerHostId}\n / @conditional-compile-remove(call-readiness) /\n deviceChecks={props.options?.deviceChecks}\n / @conditional-compile-remove(call-readiness) /\n onPermissionsTroubleshootingClick={props.options?.onPermissionsTroubleshootingClick}\n / @conditional-compile-remove(call-readiness) /\n onNetworkingTroubleShootingClick={props.options?.onNetworkingTroubleShootingClick}\n capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}\n logo={props.options?.branding?.logo}\n backgroundImage={props.options?.branding?.backgroundImage}\n />\n );\n break;\n case 'accessDeniedTeamsMeeting':\n pageElement = (\n <NoticePage\n iconName=\"NoticePageAccessDeniedTeamsMeeting\"\n title={locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle}\n moreDetails={locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails}\n dataUiId={'access-denied-teams-meeting-page'}\n />\n );\n break;\n case 'removedFromCall':\n pageElement = (\n <NoticePage\n iconName=\"NoticePageRemovedFromCall\"\n title={locale.strings.call.removedFromCallTitle}\n moreDetails={locale.strings.call.removedFromCallMoreDetails}\n dataUiId={'removed-from-call-page'}\n />\n );\n break;\n case 'joinCallFailedDueToNoNetwork':\n pageElement = (\n <NoticePage\n iconName=\"NoticePageJoinCallFailedDueToNoNetwork\"\n title={locale.strings.call.failedToJoinCallDueToNoNetworkTitle}\n moreDetails={locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails}\n dataUiId={'join-call-failed-due-to-no-network-page'}\n />\n );\n break;\n case 'leaving':\n pageElement = (\n <NoticePage\n title={locale.strings.call.leavingCallTitle ?? 'Leaving...'}\n dataUiId={'leaving-page'}\n pageStyle={leavePageStyle}\n disableStartCallButton={true}\n />\n );\n break;\n case 'leftCall': {\n const { title, moreDetails, disableStartCallButton, iconName } = getEndedCallPageProps(locale, endedCall);\n / @conditional-compile-remove(end-of-call-survey) /\n if (!props.options?.surveyOptions?.disableSurvey) {\n pageElement = (\n <SurveyPage\n dataUiId={'left-call-page'}\n surveyOptions={props.options?.surveyOptions}\n iconName={iconName}\n title={title}\n moreDetails={moreDetails}\n disableStartCallButton={disableStartCallButton}\n mobileView={props.mobileView}\n />\n );\n break;\n }\n pageElement = (\n <NoticePage\n iconName={iconName}\n title={title}\n moreDetails={callees ? '' : moreDetails}\n dataUiId={'left-call-page'}\n disableStartCallButton={disableStartCallButton}\n />\n );\n\n break;\n }\n case 'lobby':\n pageElement = (\n <LobbyPage\n mobileView={props.mobileView}\n modalLayerHostId={props.modalLayerHostId}\n options={props.options}\n updateSidePaneRenderer={setSidePaneRenderer}\n mobileChatTabHeader={props.mobileChatTabHeader}\n latestErrors={latestErrors}\n onDismissError={onDismissError}\n capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}\n />\n );\n break;\n case 'transferring':\n pageElement = (\n <TransferPage\n mobileView={props.mobileView}\n modalLayerHostId={props.modalLayerHostId}\n options={props.options}\n updateSidePaneRenderer={setSidePaneRenderer}\n mobileChatTabHeader={props.mobileChatTabHeader}\n onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n latestErrors={latestErrors}\n onDismissError={onDismissError}\n capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}\n />\n );\n break;\n case 'call':\n pageElement = (\n <CallPage\n callInvitationURL={callInvitationUrl}\n onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n mobileView={props.mobileView}\n modalLayerHostId={props.modalLayerHostId}\n options={props.options}\n updateSidePaneRenderer={setSidePaneRenderer}\n mobileChatTabHeader={props.mobileChatTabHeader}\n onCloseChatPane={props.onCloseChatPane}\n latestErrors={latestErrors}\n onDismissError={onDismissError}\n galleryLayout={userSetGalleryLayout}\n onUserSetGalleryLayoutChange={setUserSetGalleryLayout}\n onSetUserSetOverflowGalleryPosition={setUserSetOverflowGalleryPosition}\n userSetOverflowGalleryPosition={userSetOverflowGalleryPosition}\n capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}\n pinnedParticipants={pinnedParticipants}\n setPinnedParticipants={setPinnedParticipants}\n compositeAudioContext={compositeAudioContext.current}\n />\n );\n break;\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n case 'hold':\n pageElement = (\n <>\n {\n <HoldPage\n mobileView={props.mobileView}\n modalLayerHostId={props.modalLayerHostId}\n options={props.options}\n updateSidePaneRenderer={setSidePaneRenderer}\n mobileChatTabHeader={props.mobileChatTabHeader}\n latestErrors={latestErrors}\n onDismissError={onDismissError}\n capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}\n />\n }\n </>\n );\n break;\n }\n\n useEndedCallConsoleErrors(endedCall);\n\n / @conditional-compile-remove(unsupported-browser) /\n switch (page) {\n case 'unsupportedEnvironment':\n pageElement = (\n <>\n {\n / @conditional-compile-remove(unsupported-browser) /\n <UnsupportedBrowserPage\n onTroubleshootingClick={props.options?.onEnvironmentInfoTroubleshootingClick}\n environmentInfo={adapter.getState().environmentInfo}\n />\n }\n </>\n );\n break;\n }\n\n if (!pageElement) {\n throw new Error('Invalid call composite page');\n }\n\n return (\n <SidePaneProvider sidePaneRenderer={sidePaneRenderer} overrideSidePane={injectedSidePaneProps}>\n {pageElement}\n </SidePaneProvider>\n );\n};\n\n/\n A customizable UI composite for calling experience.\n \n @remarks Call composite min width/height are as follow:\n * - mobile: 17.5rem x 21rem (280px x 336px, with default rem at 16px)\n * - desktop: 30rem x 22rem (480px x 352px, with default rem at 16px)\n \n @public\n /\nexport const CallComposite = (props: CallCompositeProps): JSX.Element => <CallCompositeInner {...props} />;\n\n/\n @private\n /\nexport interface InternalCallCompositeProps {\n overrideSidePane?: InjectedSidePaneProps;\n onSidePaneIdChange?: (sidePaneId: string \| undefined) => void;\n onCloseChatPane?: () => void;\n // legacy property to avoid breaking change\n mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n}\n\n/* @private */\nexport const CallCompositeInner = (props: CallCompositeProps & InternalCallCompositeProps): JSX.Element => {\n const {\n adapter,\n callInvitationUrl,\n onFetchAvatarPersonaData,\n onFetchParticipantMenuItems,\n options,\n formFactor = 'desktop'\n } = props;\n\n const mobileView = formFactor === 'mobile';\n\n const modalLayerHostId = useId('modalLayerhost');\n const mainScreenContainerClassName = useMemo(() => {\n return mobileView ? mainScreenContainerStyleMobile : mainScreenContainerStyleDesktop;\n }, [mobileView]);\n\n return (\n <div className={mainScreenContainerClassName}>\n <BaseProvider {...props}>\n <CallAdapterProvider adapter={adapter}>\n <MainScreen\n callInvitationUrl={callInvitationUrl}\n onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n mobileView={mobileView}\n modalLayerHostId={modalLayerHostId}\n options={options}\n onSidePaneIdChange={props.onSidePaneIdChange}\n overrideSidePane={props.overrideSidePane}\n mobileChatTabHeader={props.mobileChatTabHeader}\n onCloseChatPane={props.onCloseChatPane}\n />\n {\n // This layer host is for ModalLocalAndRemotePIP in SidePane. This LayerHost cannot be inside the SidePane\n // because when the SidePane is hidden, ie. style property display is 'none', it takes up no space. This causes problems when dragging\n // the Modal because the draggable bounds thinks it has no space and will always return to its initial position after dragging.\n // Additionally, this layer host cannot be in the Call Arrangement as it needs to be rendered before useMinMaxDragPosition() in\n // common/utils useRef is called.\n // Warning: this is fragile and works because the call arrangement page is only rendered after the call has connected and thus this\n // LayerHost will be guaranteed to have rendered (and subsequently mounted in the DOM). This ensures the DOM element will be available\n // before the call to `document.getElementById(modalLayerHostId)` is made.\n <LayerHost id={modalLayerHostId} className={mergeStyles(modalLayerHostStyle)} />\n }\n </CallAdapterProvider>\n </BaseProvider>\n </div>\n );\n};\n\nconst getQueryOptions = (options: { role?: ParticipantRole }): PermissionConstraints => {\n if (options.role === 'Consumer') {\n return {\n video: false,\n audio: true\n };\n }\n return { video: true, audio: true };\n};\n"]}
1	+ {"version":3,"file":"CallComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallComposite/CallComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { _isInCall } from '@internal/calling-component-bindings';\nimport {\n ActiveErrorMessage,\n ErrorBar,\n ParticipantMenuItemsCallback,\n useTheme,\n VideoTilesOptions\n} from '@internal/react-components';\n/* @conditional-compile-remove(end-of-call-survey) /\nimport { CallSurveyImprovementSuggestions } from '@internal/react-components';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallCompositeIcons } from '../common/icons';\nimport { useLocale } from '../localization';\nimport { CommonCallAdapter, StartCallIdentifier } from './adapter/CallAdapter';\nimport { CallAdapterProvider, useAdapter } from './adapter/CallAdapterProvider';\nimport { CallPage } from './pages/CallPage';\nimport { ConfigurationPage } from './pages/ConfigurationPage';\nimport { NoticePage } from './pages/NoticePage';\nimport { useSelector } from './hooks/useSelector';\nimport { getEndedCall, getPage, getTargetCallees } from './selectors/baseSelectors';\nimport { LobbyPage } from './pages/LobbyPage';\nimport { TransferPage } from './pages/TransferPage';\nimport {\n leavingPageStyle,\n mainScreenContainerStyleDesktop,\n mainScreenContainerStyleMobile\n} from './styles/CallComposite.styles';\nimport { CallControlOptions } from './types/CallControlOptions';\n\nimport { LayerHost, mergeStyles } from '@fluentui/react';\nimport { modalLayerHostStyle } from '../common/styles/ModalLocalAndRemotePIP.styles';\nimport { useId } from '@fluentui/react-hooks';\n/ @conditional-compile-remove(one-to-n-calling) / / @conditional-compile-remove(PSTN-calls) /\nimport { HoldPage } from './pages/HoldPage';\n/ @conditional-compile-remove(unsupported-browser) /\nimport { UnsupportedBrowserPage } from './pages/UnsupportedBrowser';\n/ @conditional-compile-remove(end-of-call-survey) /\nimport { CallSurvey } from '@azure/communication-calling';\nimport { ParticipantRole, PermissionConstraints } from '@azure/communication-calling';\nimport { MobileChatSidePaneTabHeaderProps } from '../common/TabHeader';\nimport { InjectedSidePaneProps, SidePaneProvider, SidePaneRenderer } from './components/SidePane/SidePaneProvider';\nimport {\n filterLatestErrors,\n getEndedCallPageProps,\n trackErrorAsDismissed,\n updateTrackedErrorsWithActiveErrors\n} from './utils';\nimport { TrackedErrors } from './types/ErrorTracking';\nimport { usePropsFor } from './hooks/usePropsFor';\nimport { deviceCountSelector } from './selectors/deviceCountSelector';\nimport { VideoGalleryLayout } from '@internal/react-components';\n\nimport { capabilitiesChangedInfoAndRoleSelector } from './selectors/capabilitiesChangedInfoAndRoleSelector';\n\nimport { useTrackedCapabilityChangedNotifications } from './utils/TrackCapabilityChangedNotifications';\nimport { useEndedCallConsoleErrors } from './utils/useConsoleErrors';\n/ @conditional-compile-remove(end-of-call-survey) /\nimport { SurveyPage } from './pages/SurveyPage';\nimport { useAudio } from '../common/AudioProvider';\n\n/\n Props for {@link CallComposite}.\n \n @public\n /\nexport interface CallCompositeProps extends BaseCompositeProps<CallCompositeIcons> {\n /\n An adapter provides logic and data to the composite.\n * Composite can also be controlled using the adapter.\n /\n adapter: CommonCallAdapter;\n /\n Optimizes the composite form factor for either desktop or mobile.\n * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.\n * @defaultValue 'desktop'\n /\n formFactor?: 'desktop' \| 'mobile';\n /\n URL to invite new participants to the current call. If this is supplied, a button appears in the Participants\n * Button flyout menu.\n /\n callInvitationUrl?: string;\n /\n Flags to enable/disable or customize UI elements of the {@link CallComposite}.\n /\n options?: CallCompositeOptions;\n}\n\n/ @conditional-compile-remove(call-readiness) /\n/\n Device Checks.\n * Choose whether or not to block starting a call depending on camera and microphone permission options.\n \n @beta\n /\nexport interface DeviceCheckOptions {\n /\n Camera Permission prompts for your call.\n * 'required' - requires the permission to be allowed before permitting the user join the call.\n * 'optional' - permission can be disallowed and the user is still permitted to join the call.\n * 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.\n /\n camera: 'required' \| 'optional' \| 'doNotPrompt';\n /\n Microphone permission prompts for your call.\n * 'required' - requires the permission to be allowed before permitting the user join the call.\n * 'optional' - permission can be disallowed and the user is still permitted to join the call.\n * 'doNotPrompt' - permission is not required and the user is not prompted to allow the permission.\n /\n microphone: 'required' \| 'optional' \| 'doNotPrompt';\n}\n\n/\n Menu options for remote video tiles in {@link VideoGallery}.\n \n @public\n /\nexport interface RemoteVideoTileMenuOptions {\n /\n If set to true, remote video tiles in the VideoGallery will not have menu options\n \n @defaultValue false\n /\n isHidden?: boolean;\n}\n\n/\n Options for the local video tile in the Call composite.\n \n @public\n /\nexport interface LocalVideoTileOptions {\n /\n Position of the local video tile. If unset will render the local tile in the floating local position.\n \n @defaultValue 'floating'\n * @remarks 'grid' - local video tile will be rendered in the grid view of the videoGallery.\n * 'floating' - local video tile will be rendered in the floating position and will observe overflow gallery\n * local video tile rules and be docked in the bottom corner.\n * This does not affect the Configuration screen or the side pane Picture in Picture in Picture view.\n /\n position?: 'grid' \| 'floating';\n}\n/\n Optional features of the {@link CallComposite}.\n \n @public\n /\nexport type CallCompositeOptions = {\n /\n Surface Azure Communication Services backend errors in the UI with {@link @azure/communication-react#ErrorBar}.\n * Hide or show the error bar.\n * @defaultValue true\n /\n errorBar?: boolean;\n /\n Hide or Customize the control bar element.\n * Can be customized by providing an object of type {@link @azure/communication-react#CallControlOptions}.\n * @defaultValue true\n /\n callControls?: boolean \| CallControlOptions;\n / @conditional-compile-remove(call-readiness) /\n /\n Device permissions check options for your call.\n * Here you can choose what device permissions you prompt the user for,\n * as well as what device permissions must be accepted before starting a call.\n /\n deviceChecks?: DeviceCheckOptions;\n / @conditional-compile-remove(call-readiness) /\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 / @conditional-compile-remove(call-readiness) /\n /\n Callback you may provide to supply users with further steps to troubleshoot why they have been\n * having network issues when connecting to the 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 / @conditional-compile-remove(unsupported-browser) /\n /\n Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.\n \n @example\n * ```ts\n * onBrowserTroubleShootingClick?: () =>\n * window.open('https://contoso.com/browser-troubleshooting', '_blank');\n * ```\n \n @remarks\n * if this is not supplied, the composite will not show a unsupported browser page.\n /\n onEnvironmentInfoTroubleshootingClick?: () => void;\n /\n Remote participant video tile menu options\n /\n remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n /\n Options for controlling the local video tile.\n \n @remarks if 'false' the local video tile will not be rendered.\n /\n localVideoTile?: boolean \| LocalVideoTileOptions;\n /\n Options for controlling video tile.\n /\n videoTilesOptions?: VideoTilesOptions;\n /\n Options for controlling the starting layout of the composite's video gallery\n /\n galleryOptions?: {\n /\n Layout for the gallery when the call starts\n /\n layout?: VideoGalleryLayout;\n };\n / @conditional-compile-remove(end-of-call-survey) /\n /\n Options for end of call survey\n /\n surveyOptions?: {\n /\n Disable call survey at the end of a call.\n * @defaultValue false\n /\n disableSurvey?: boolean;\n /\n Optional callback to redirect users to custom screens when survey is done, note that default end call screen will be shown if this callback is not provided\n * This callback can be used to redirect users to different screens depending on survey state, whether it is submitted, skipped or has a problem when submitting the survey\n /\n onSurveyClosed?: (surveyState: 'sent' \| 'skipped' \| 'error', surveyError?: string) => void;\n /\n Optional callback to handle survey data including free form text response\n * Note that free form text response survey option is only going to be enabled when this callback is provided\n * User will need to handle all free form text response on their own\n /\n onSurveySubmitted?: (\n callId: string,\n surveyId: string,\n /\n This is the survey results containing star survey data and API tag survey data.\n * This part of the result will always be sent to the calling sdk\n * This callback provides user with the ability to gain access to survey data\n /\n submittedSurvey: CallSurvey,\n /\n This is the survey results containing free form text\n * This part of the result will not be handled by composites\n * User will need to collect and handle this information 100% on their own\n * Free form text survey is not going to show in the UI if onSurveySubmitted is not populated\n /\n improvementSuggestions: CallSurveyImprovementSuggestions\n ) => Promise<void>;\n };\n /\n Options for setting additional customizations related to personalized branding.\n /\n branding?: {\n /\n Logo displayed on the configuration page.\n /\n logo?: {\n /\n URL for the logo image.\n \n @remarks\n * Recommended size is 80x80 pixels.\n /\n url: string;\n /\n Alt text for the logo image.\n /\n alt?: string;\n /\n The logo can be displayed as a circle.\n \n @defaultValue 'unset'\n /\n shape?: 'unset' \| 'circle';\n };\n /\n Background image displayed on the configuration page.\n /\n backgroundImage?: {\n /\n URL for the background image.\n \n @remarks\n * Background image should be larger than 576x567 pixels and smaller than 2048x2048 pixels pixels.\n /\n url: string;\n };\n };\n / @conditional-compile-remove(spotlight) /\n /\n Options for settings related to spotlight.\n /\n spotlight?: {\n /\n Flag to hide the menu buttons to start and stop spotlight for remote participants and the local participant.\n * @defaultValue false\n /\n hideSpotlightButtons?: boolean;\n };\n};\n\ntype MainScreenProps = {\n mobileView: boolean;\n modalLayerHostId: string;\n callInvitationUrl?: string;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n options?: CallCompositeOptions;\n overrideSidePane?: InjectedSidePaneProps;\n onSidePaneIdChange?: (sidePaneId: string \| undefined) => void;\n mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n onCloseChatPane?: () => void;\n};\n\nconst isShowing = (overrideSidePane?: InjectedSidePaneProps): boolean => {\n return !!overrideSidePane?.isActive;\n};\n\nconst MainScreen = (props: MainScreenProps): JSX.Element => {\n const adapter = useAdapter();\n const { camerasCount, microphonesCount } = useSelector(deviceCountSelector);\n const hasCameras = camerasCount > 0;\n const hasMicrophones = microphonesCount > 0;\n\n useEffect(() => {\n (async () => {\n const constrain = getQueryOptions({\n role: adapter.getState().call?.role\n });\n await adapter.askDevicePermission(constrain);\n adapter.queryCameras();\n adapter.queryMicrophones();\n adapter.querySpeakers();\n })();\n }, [\n adapter,\n // Ensure we re-ask for permissions if the number of devices goes from 0 -> n during a call\n // as we cannot request permissions when there are no devices.\n hasCameras,\n hasMicrophones\n ]);\n\n const { callInvitationUrl, onFetchAvatarPersonaData, onFetchParticipantMenuItems } = props;\n const page = useSelector(getPage);\n const endedCall = useSelector(getEndedCall);\n\n const [sidePaneRenderer, setSidePaneRenderer] = React.useState<SidePaneRenderer \| undefined>();\n const [injectedSidePaneProps, setInjectedSidePaneProps] = React.useState<InjectedSidePaneProps>();\n const [userSetGalleryLayout, setUserSetGalleryLayout] = useState<VideoGalleryLayout>(\n props.options?.galleryOptions?.layout ?? 'floatingLocalVideo'\n );\n const [userSetOverflowGalleryPosition, setUserSetOverflowGalleryPosition] = useState<'Responsive' \| 'horizontalTop'>(\n 'Responsive'\n );\n\n const overridePropsRef = useRef<InjectedSidePaneProps \| undefined>(props.overrideSidePane);\n useEffect(() => {\n setInjectedSidePaneProps(props.overrideSidePane);\n // When the injected side pane is opened, clear the previous side pane active state.\n // this ensures when the injected side pane is \"closed\", the previous side pane is not \"re-opened\".\n if (!isShowing(overridePropsRef.current) && isShowing(props.overrideSidePane)) {\n setSidePaneRenderer(undefined);\n }\n overridePropsRef.current = props.overrideSidePane;\n }, [props.overrideSidePane]);\n\n const onSidePaneIdChange = props.onSidePaneIdChange;\n useEffect(() => {\n onSidePaneIdChange?.(sidePaneRenderer?.id);\n }, [sidePaneRenderer?.id, onSidePaneIdChange]);\n\n // When the call ends ensure the side pane is set to closed to prevent the side pane being open if the call is re-joined.\n useEffect(() => {\n const closeSidePane = (): void => {\n setSidePaneRenderer(undefined);\n };\n adapter.on('callEnded', closeSidePane);\n return () => {\n adapter.off('callEnded', closeSidePane);\n };\n }, [adapter]);\n\n const compositeAudioContext = useAudio();\n\n const capabilitiesChangedInfoAndRole = useSelector(capabilitiesChangedInfoAndRoleSelector);\n\n const capabilitiesChangedNotificationBarProps =\n useTrackedCapabilityChangedNotifications(capabilitiesChangedInfoAndRole);\n\n // Track the last dismissed errors of any error kind to prevent errors from re-appearing on subsequent page navigation\n // This works by tracking the most recent timestamp of any active error type.\n // And then tracking when that error type was last dismissed.\n const activeErrors = usePropsFor(ErrorBar).activeErrorMessages;\n const [trackedErrors, setTrackedErrors] = useState<TrackedErrors>({} as TrackedErrors);\n useEffect(() => {\n setTrackedErrors((prev) => updateTrackedErrorsWithActiveErrors(prev, activeErrors));\n }, [activeErrors]);\n const onDismissError = useCallback((error: ActiveErrorMessage) => {\n setTrackedErrors((prev) => trackErrorAsDismissed(error.type, prev));\n }, []);\n const latestErrors = useMemo(() => filterLatestErrors(activeErrors, trackedErrors), [activeErrors, trackedErrors]);\n const callees = useSelector(getTargetCallees) as StartCallIdentifier[];\n const locale = useLocale();\n const palette = useTheme().palette;\n / @conditional-compile-remove(PSTN-calls) /\n const alternateCallerId = adapter.getState().alternateCallerId;\n const leavePageStyle = useMemo(() => leavingPageStyle(palette), [palette]);\n let pageElement: JSX.Element \| undefined;\n const [pinnedParticipants, setPinnedParticipants] = useState<string[]>([]);\n switch (page) {\n case 'configuration':\n pageElement = (\n <ConfigurationPage\n mobileView={props.mobileView}\n startCallHandler={(): void => {\n if (callees) {\n adapter.startCall(\n callees,\n / @conditional-compile-remove(PSTN-calls) / alternateCallerId\n ? { alternateCallerId: { phoneNumber: alternateCallerId } }\n : {}\n );\n } else {\n adapter.joinCall({\n microphoneOn: 'keep',\n cameraOn: 'keep'\n });\n }\n }}\n updateSidePaneRenderer={setSidePaneRenderer}\n latestErrors={latestErrors}\n onDismissError={onDismissError}\n modalLayerHostId={props.modalLayerHostId}\n / @conditional-compile-remove(call-readiness) /\n deviceChecks={props.options?.deviceChecks}\n / @conditional-compile-remove(call-readiness) /\n onPermissionsTroubleshootingClick={props.options?.onPermissionsTroubleshootingClick}\n / @conditional-compile-remove(call-readiness) /\n onNetworkingTroubleShootingClick={props.options?.onNetworkingTroubleShootingClick}\n capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}\n logo={props.options?.branding?.logo}\n backgroundImage={props.options?.branding?.backgroundImage}\n />\n );\n break;\n case 'accessDeniedTeamsMeeting':\n pageElement = (\n <NoticePage\n iconName=\"NoticePageAccessDeniedTeamsMeeting\"\n title={locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedTitle}\n moreDetails={locale.strings.call.failedToJoinTeamsMeetingReasonAccessDeniedMoreDetails}\n dataUiId={'access-denied-teams-meeting-page'}\n />\n );\n break;\n case 'removedFromCall':\n pageElement = (\n <NoticePage\n iconName=\"NoticePageRemovedFromCall\"\n title={locale.strings.call.removedFromCallTitle}\n moreDetails={locale.strings.call.removedFromCallMoreDetails}\n dataUiId={'removed-from-call-page'}\n />\n );\n break;\n case 'joinCallFailedDueToNoNetwork':\n pageElement = (\n <NoticePage\n iconName=\"NoticePageJoinCallFailedDueToNoNetwork\"\n title={locale.strings.call.failedToJoinCallDueToNoNetworkTitle}\n moreDetails={locale.strings.call.failedToJoinCallDueToNoNetworkMoreDetails}\n dataUiId={'join-call-failed-due-to-no-network-page'}\n />\n );\n break;\n case 'leaving':\n pageElement = (\n <NoticePage\n title={locale.strings.call.leavingCallTitle ?? 'Leaving...'}\n dataUiId={'leaving-page'}\n pageStyle={leavePageStyle}\n disableStartCallButton={true}\n />\n );\n break;\n case 'leftCall': {\n const { title, moreDetails, disableStartCallButton, iconName } = getEndedCallPageProps(locale, endedCall);\n / @conditional-compile-remove(end-of-call-survey) /\n if (!props.options?.surveyOptions?.disableSurvey) {\n pageElement = (\n <SurveyPage\n dataUiId={'left-call-page'}\n surveyOptions={props.options?.surveyOptions}\n iconName={iconName}\n title={title}\n moreDetails={moreDetails}\n disableStartCallButton={disableStartCallButton}\n mobileView={props.mobileView}\n />\n );\n break;\n }\n pageElement = (\n <NoticePage\n iconName={iconName}\n title={title}\n moreDetails={callees ? '' : moreDetails}\n dataUiId={'left-call-page'}\n disableStartCallButton={disableStartCallButton}\n />\n );\n\n break;\n }\n case 'lobby':\n pageElement = (\n <LobbyPage\n mobileView={props.mobileView}\n modalLayerHostId={props.modalLayerHostId}\n options={props.options}\n updateSidePaneRenderer={setSidePaneRenderer}\n mobileChatTabHeader={props.mobileChatTabHeader}\n latestErrors={latestErrors}\n onDismissError={onDismissError}\n capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}\n />\n );\n break;\n case 'transferring':\n pageElement = (\n <TransferPage\n mobileView={props.mobileView}\n modalLayerHostId={props.modalLayerHostId}\n options={props.options}\n updateSidePaneRenderer={setSidePaneRenderer}\n mobileChatTabHeader={props.mobileChatTabHeader}\n onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n latestErrors={latestErrors}\n onDismissError={onDismissError}\n capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}\n />\n );\n break;\n case 'call':\n pageElement = (\n <CallPage\n callInvitationURL={callInvitationUrl}\n onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n mobileView={props.mobileView}\n modalLayerHostId={props.modalLayerHostId}\n options={props.options}\n updateSidePaneRenderer={setSidePaneRenderer}\n mobileChatTabHeader={props.mobileChatTabHeader}\n onCloseChatPane={props.onCloseChatPane}\n latestErrors={latestErrors}\n onDismissError={onDismissError}\n galleryLayout={userSetGalleryLayout}\n onUserSetGalleryLayoutChange={setUserSetGalleryLayout}\n onSetUserSetOverflowGalleryPosition={setUserSetOverflowGalleryPosition}\n userSetOverflowGalleryPosition={userSetOverflowGalleryPosition}\n capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}\n pinnedParticipants={pinnedParticipants}\n setPinnedParticipants={setPinnedParticipants}\n compositeAudioContext={compositeAudioContext}\n />\n );\n break;\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n case 'hold':\n pageElement = (\n <>\n {\n <HoldPage\n mobileView={props.mobileView}\n modalLayerHostId={props.modalLayerHostId}\n options={props.options}\n updateSidePaneRenderer={setSidePaneRenderer}\n mobileChatTabHeader={props.mobileChatTabHeader}\n latestErrors={latestErrors}\n onDismissError={onDismissError}\n capabilitiesChangedNotificationBarProps={capabilitiesChangedNotificationBarProps}\n />\n }\n </>\n );\n break;\n }\n\n useEndedCallConsoleErrors(endedCall);\n\n / @conditional-compile-remove(unsupported-browser) /\n switch (page) {\n case 'unsupportedEnvironment':\n pageElement = (\n <>\n {\n / @conditional-compile-remove(unsupported-browser) /\n <UnsupportedBrowserPage\n onTroubleshootingClick={props.options?.onEnvironmentInfoTroubleshootingClick}\n environmentInfo={adapter.getState().environmentInfo}\n />\n }\n </>\n );\n break;\n }\n\n if (!pageElement) {\n throw new Error('Invalid call composite page');\n }\n\n return (\n <SidePaneProvider sidePaneRenderer={sidePaneRenderer} overrideSidePane={injectedSidePaneProps}>\n {pageElement}\n </SidePaneProvider>\n );\n};\n\n/\n A customizable UI composite for calling experience.\n \n @remarks Call composite min width/height are as follow:\n * - mobile: 17.5rem x 21rem (280px x 336px, with default rem at 16px)\n * - desktop: 30rem x 22rem (480px x 352px, with default rem at 16px)\n \n @public\n /\nexport const CallComposite = (props: CallCompositeProps): JSX.Element => <CallCompositeInner {...props} />;\n\n/\n @private\n /\nexport interface InternalCallCompositeProps {\n overrideSidePane?: InjectedSidePaneProps;\n onSidePaneIdChange?: (sidePaneId: string \| undefined) => void;\n onCloseChatPane?: () => void;\n // legacy property to avoid breaking change\n mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n}\n\n/* @private */\nexport const CallCompositeInner = (props: CallCompositeProps & InternalCallCompositeProps): JSX.Element => {\n const {\n adapter,\n callInvitationUrl,\n onFetchAvatarPersonaData,\n onFetchParticipantMenuItems,\n options,\n formFactor = 'desktop'\n } = props;\n\n const mobileView = formFactor === 'mobile';\n\n const modalLayerHostId = useId('modalLayerhost');\n const mainScreenContainerClassName = useMemo(() => {\n return mobileView ? mainScreenContainerStyleMobile : mainScreenContainerStyleDesktop;\n }, [mobileView]);\n\n return (\n <div className={mainScreenContainerClassName}>\n <BaseProvider {...props}>\n <CallAdapterProvider adapter={adapter}>\n <MainScreen\n callInvitationUrl={callInvitationUrl}\n onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n mobileView={mobileView}\n modalLayerHostId={modalLayerHostId}\n options={options}\n onSidePaneIdChange={props.onSidePaneIdChange}\n overrideSidePane={props.overrideSidePane}\n mobileChatTabHeader={props.mobileChatTabHeader}\n onCloseChatPane={props.onCloseChatPane}\n />\n {\n // This layer host is for ModalLocalAndRemotePIP in SidePane. This LayerHost cannot be inside the SidePane\n // because when the SidePane is hidden, ie. style property display is 'none', it takes up no space. This causes problems when dragging\n // the Modal because the draggable bounds thinks it has no space and will always return to its initial position after dragging.\n // Additionally, this layer host cannot be in the Call Arrangement as it needs to be rendered before useMinMaxDragPosition() in\n // common/utils useRef is called.\n // Warning: this is fragile and works because the call arrangement page is only rendered after the call has connected and thus this\n // LayerHost will be guaranteed to have rendered (and subsequently mounted in the DOM). This ensures the DOM element will be available\n // before the call to `document.getElementById(modalLayerHostId)` is made.\n <LayerHost id={modalLayerHostId} className={mergeStyles(modalLayerHostStyle)} />\n }\n </CallAdapterProvider>\n </BaseProvider>\n </div>\n );\n};\n\nconst getQueryOptions = (options: { role?: ParticipantRole }): PermissionConstraints => {\n if (options.role === 'Consumer') {\n return {\n video: false,\n audio: true\n };\n }\n return { video: true, audio: true };\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/common/AudioProvider.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+/**
+ * @private
+ */
+export interface ACSAudioProviderProps {
+    audioContext: AudioContext;
+    children: JSX.Element;
+}
+/**
+ *
+ * @param props
+ * @returns
+ */
+export declare const ACSAudioProvider: (props: ACSAudioProviderProps) => JSX.Element;
+/**
+ * @private
+ */
+export declare const useAudio: () => AudioContext;
+//# sourceMappingURL=AudioProvider.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/AudioProvider.js ADDED Viewed

@@ -0,0 +1,25 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React, { useContext, createContext } from 'react';
+/**
+ *
+ * @param props
+ * @returns
+ */
+export const ACSAudioProvider = (props) => {
+    const { audioContext, children } = props;
+    const alreadyWrapped = useAudio();
+    if (alreadyWrapped) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    return React.createElement(ACSAudioContext.Provider, { value: audioContext }, props.children);
+};
+/**
+ * @private
+ */
+const ACSAudioContext = createContext(new AudioContext());
+/**
+ * @private
+ */
+export const useAudio = () => useContext(ACSAudioContext);
+//# sourceMappingURL=AudioProvider.js.map

package/dist/dist-esm/react-composites/src/composites/common/AudioProvider.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AudioProvider.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AudioProvider.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAUzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAe,EAAE;IAC5E,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACzC,MAAM,cAAc,GAAG,QAAQ,EAAE,CAAC;IAClC,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,0CAAG,QAAQ,CAAI,CAAC;IACzB,CAAC;IACD,OAAO,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,IAAG,KAAK,CAAC,QAAQ,CAA4B,CAAC;AACpG,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,eAAe,GAAG,aAAa,CAAe,IAAI,YAAY,EAAE,CAAC,CAAC;AAExE;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAiB,EAAE,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useContext, createContext } from 'react';\n\n/**\n * @private\n */\nexport interface ACSAudioProviderProps {\n audioContext: AudioContext;\n children: JSX.Element;\n}\n\n/**\n *\n * @param props\n * @returns\n */\nexport const ACSAudioProvider = (props: ACSAudioProviderProps): JSX.Element => {\n const { audioContext, children } = props;\n const alreadyWrapped = useAudio();\n if (alreadyWrapped) {\n return <>{children}</>;\n }\n return <ACSAudioContext.Provider value={audioContext}>{props.children}</ACSAudioContext.Provider>;\n};\n\n/**\n * @private\n */\nconst ACSAudioContext = createContext<AudioContext>(new AudioContext());\n\n/**\n * @private\n */\nexport const useAudio = (): AudioContext => useContext(ACSAudioContext);\n"]}

package/dist/dist-esm/react-composites/src/composites/common/BaseComposite.js CHANGED Viewed

@@ -7,6 +7,7 @@ import { LocalizationProvider } from '../localization';
 import { DEFAULT_COMPOSITE_ICONS } from './icons';
 import { globalLayerHostStyle } from './styles/GlobalHostLayer.styles';
 import { useId } from '@fluentui/react-hooks';
+import { ACSAudioProvider } from './AudioProvider';
 /**
  * A base provider {@link React.Context} to wrap components with other required providers
  * (e.g. icons, FluentThemeProvider, LocalizationProvider).
@@ -40,12 +41,17 @@ export const BaseProvider = (props) => {
      * to ensure all icons render correctly.
      */
     registerIcons({ icons: Object.assign(Object.assign({}, iconsToRegister), props.icons) });
+    /**
+     * We need to create one context for the AudioProvider to ensure that we only have one instance of the AudioContext.
+     */
+    const compositeAudioContext = new AudioContext();
     // we use Customizer to override default LayerHost injected to <body />
     // which stop polluting global dom tree and increase compatibility with react-full-screen
     const CompositeElement = (React.createElement(FluentThemeProvider, { fluentTheme: fluentTheme, rtl: rtl },
         React.createElement("meta", { name: "viewport", content: "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" }),
         React.createElement(Customizer, { scopedSettings: { Layer: { hostId: globalLayerHostId } } },
-            React.createElement(WithBackgroundColor, null, props.children)),
+            React.createElement(ACSAudioProvider, { audioContext: compositeAudioContext },
+                React.createElement(WithBackgroundColor, null, props.children))),
         React.createElement(LayerHost, { id: globalLayerHostId, className: mergeStyles(globalLayerHostStyle) })));
     const localizedElement = locale ? LocalizationProvider({ locale, children: CompositeElement }) : CompositeElement;
     return React.createElement(BaseContext.Provider, { value: true }, localizedElement);