@azure/communication-react 1.5.1-alpha-202305160013 → 1.5.1-alpha-202305180013

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 (23) hide show
  1. package/dist/dist-cjs/communication-react/index.js +595 -373
  2. package/dist/dist-cjs/communication-react/index.js.map +1 -1
  3. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
  4. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
  5. package/dist/dist-esm/react-components/src/components/CameraButton.js +4 -2
  6. package/dist/dist-esm/react-components/src/components/CameraButton.js.map +1 -1
  7. package/dist/dist-esm/react-components/src/components/InputBoxComponent.js +559 -363
  8. package/dist/dist-esm/react-components/src/components/InputBoxComponent.js.map +1 -1
  9. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js +1 -1
  10. package/dist/dist-esm/react-components/src/components/VideoEffects/VideoEffectsItem.js.map +1 -1
  11. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js +12 -2
  12. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js.map +1 -1
  13. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js +1 -1
  14. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js.map +1 -1
  15. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js +12 -1
  16. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js.map +1 -1
  17. package/dist/dist-esm/react-composites/src/composites/ChatComposite/adapter/AzureCommunicationChatAdapter.js +4 -0
  18. package/dist/dist-esm/react-composites/src/composites/ChatComposite/adapter/AzureCommunicationChatAdapter.js.map +1 -1
  19. package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js +3 -1
  20. package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js.map +1 -1
  21. package/dist/dist-esm/react-composites/src/composites/common/Drawer/MoreDrawer.js +1 -1
  22. package/dist/dist-esm/react-composites/src/composites/common/Drawer/MoreDrawer.js.map +1 -1
  23. package/package.json +8 -8
@@ -2,5 +2,5 @@
2
2
  // Copyright (c) Microsoft Corporation.
3
3
  // Licensed under the MIT license.
4
4
  // GENERATED FILE. DO NOT EDIT MANUALLY.
5
- module.exports = '1.5.1-alpha-202305160013';
5
+ module.exports = '1.5.1-alpha-202305180013';
6
6
  //# sourceMappingURL=telemetryVersion.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.5.1-alpha-202305160013';\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,0BAA0B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.5.1-alpha-202305180013';\n"]}
@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
9
9
  step((generator = generator.apply(thisArg, _arguments || [])).next());
10
10
  });
11
11
  };
12
- import React, { useCallback, useState } from 'react';
12
+ import React, { useCallback, useState, useMemo } from 'react';
13
13
  import { useLocale } from '../localization';
14
14
  import { ControlBarButton } from './ControlBarButton';
15
15
  import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
@@ -76,6 +76,7 @@ export const CameraButton = (props) => {
76
76
  if (props.onShowVideoEffectsPicker) {
77
77
  splitButtonMenuItems.push({
78
78
  key: 'effects',
79
+ 'data-ui-id': 'camera-split-button-video-effects',
79
80
  text: strings.videoEffectsMenuItemTitle,
80
81
  iconProps: { iconName: 'OptionsVideoBackgroundEffect', styles: { root: { lineHeight: 0 } } },
81
82
  onClick: () => {
@@ -94,10 +95,11 @@ export const CameraButton = (props) => {
94
95
  items: splitButtonMenuItems
95
96
  }
96
97
  };
98
+ const splitButtonMenuProps = useMemo(() => (Object.assign(Object.assign({}, props.splitButtonMenuProps), { className: 'camera-split-button' })), [props.splitButtonMenuProps]);
97
99
  return (React.createElement(React.Fragment, null,
98
100
  React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
99
101
  React.createElement(ControlBarButton, Object.assign({}, props, { disabled: disabled, onClick: onToggleCamera ? onToggleClick : props.onClick, onRenderOnIcon: (_a = props.onRenderOnIcon) !== null && _a !== void 0 ? _a : onRenderCameraOnIcon, onRenderOffIcon: (_b = props.onRenderOffIcon) !== null && _b !== void 0 ? _b : onRenderCameraOffIcon, strings: strings, labelKey: (_c = props.labelKey) !== null && _c !== void 0 ? _c : 'cameraButtonLabel', menuProps: (_d = props.menuProps) !== null && _d !== void 0 ? _d : (props.enableDeviceSelectionMenu
100
102
  ? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.menuStyles }), strings, splitButtonPrimaryAction)
101
- : undefined), menuIconProps: ((_f = props.menuIconProps) !== null && _f !== void 0 ? _f : !props.enableDeviceSelectionMenu) ? { hidden: true } : undefined, split: (_g = props.split) !== null && _g !== void 0 ? _g : props.enableDeviceSelectionMenu, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined }))));
103
+ : undefined), menuIconProps: ((_f = props.menuIconProps) !== null && _f !== void 0 ? _f : !props.enableDeviceSelectionMenu) ? { hidden: true } : undefined, split: (_g = props.split) !== null && _g !== void 0 ? _g : props.enableDeviceSelectionMenu, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined, splitButtonMenuProps: splitButtonMenuProps }))));
102
104
  };
103
105
  //# sourceMappingURL=CameraButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CameraButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CameraButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,EACL,sBAAsB,EAIvB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAiB,8BAA8B,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,4BAA4B,GAAG;IACnC,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,IAAI;CACK,CAAC;AA2IxB;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;;IACpE,MAAM,EAAE,qBAAqB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IACxD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG,SAAS,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC;IACvD,MAAM,OAAO,mCAAQ,aAAa,GAAK,KAAK,CAAC,OAAO,CAAE,CAAC;IACvD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAEtF,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,aAAa,CAAC;IAEjD,MAAM,oBAAoB,GAAG,GAAgB,EAAE,CAAC,CAC9C,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAC,uBAAuB,GAAG,CAChF,CAAC;IACF,MAAM,qBAAqB,GAAG,GAAgB,EAAE,CAAC,CAC/C,oBAAC,sBAAsB,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAC,wBAAwB,GAAG,CACjF,CAAC;IACF,IAAI,aAAa,IAAI,OAAO,CAAC,0BAA0B,EAAE;QACvD,OAAO,CAAC,sBAAsB,GAAG,OAAO,CAAC,0BAA0B,CAAC;KACrE;IAED,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC;IAC/B,MAAM,qBAAqB,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC,CAAC,OAAO,CAAC,uBAAuB,CAAC;IAE1G,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,UAAmB,EAAE,EAAE;QACtB,kBAAkB,CAChB,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,iCAAiC,CAAC,CAAC,CAAC,OAAO,CAAC,gCAAgC,CACnG,CAAC;IACJ,CAAC,EACD,CAAC,OAAO,CAAC,iCAAiC,EAAE,OAAO,CAAC,gCAAgC,CAAC,CACtF,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAAC,GAAS,EAAE;QAC3C,kFAAkF;QAClF,IAAI,cAAc,EAAE;YAClB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI;gBACF,MAAM,cAAc,CAAC,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,4BAA4B,CAAC,CAAC;gBAC5E,uGAAuG;gBACvG,qBAAqB,CAAC,CAAC,QAAQ,CAAC,CAAC;aAClC;oBAAS;gBACR,gBAAgB,CAAC,KAAK,CAAC,CAAC;aACzB;SACF;IACH,CAAC,CAAA,EAAE,CAAC,QAAQ,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE7E,MAAM,oBAAoB,GAA0B;QAClD;YACE,GAAG,EAAE,qBAAqB;YAC1B,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC,CAAC,OAAO,CAAC,iCAAiC;YAC1G,OAAO,EAAE,GAAG,EAAE;gBACZ,aAAa,EAAE,CAAC;YAClB,CAAC;YACD,SAAS,EAAE;gBACT,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,mCAAmC;gBAClG,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE;aACpC;SACF;KACF,CAAC;IACF,2DAA2D;IAC3D,IAAI,KAAK,CAAC,wBAAwB,EAAE;QAClC,oBAAoB,CAAC,IAAI,CAAC;YACxB,GAAG,EAAE,SAAS;YACd,IAAI,EAAE,OAAO,CAAC,yBAAyB;YACvC,SAAS,EAAE,EAAE,QAAQ,EAAE,8BAA8B,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE;YAC5F,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,KAAK,CAAC,wBAAwB,EAAE;oBAClC,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC;iBACtC;YACH,CAAC;SACF,CAAC,CAAC;KACJ;IAED,MAAM,wBAAwB,GAAwB;QACpD,GAAG,EAAE,eAAe;QACpB,KAAK,EAAE,eAAe;QACtB,QAAQ,EAAE,sBAAsB,CAAC,OAAO;QACxC,YAAY,EAAE;YACZ,UAAU,EAAE,IAAI;YAChB,KAAK,EAAE,oBAAoB;SAC5B;KACF,CAAC;IAEF,OAAO,CACL;QACE,oBAAC,SAAS,IAAC,kBAAkB,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,GAAI;QACtE,oBAAC,gBAAgB,oBACX,KAAK,IACT,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EACvD,cAAc,EAAE,MAAA,KAAK,CAAC,cAAc,mCAAI,oBAAoB,EAC5D,eAAe,EAAE,MAAA,KAAK,CAAC,eAAe,mCAAI,qBAAqB,EAC/D,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAA,KAAK,CAAC,QAAQ,mCAAI,mBAAmB,EAC/C,SAAS,EACP,MAAA,KAAK,CAAC,SAAS,mCACf,CAAC,KAAK,CAAC,yBAAyB;gBAC9B,CAAC,CAAC,8BAA8B,iCACvB,KAAK,KAAE,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,UAAU,KAC5C,OAAO,EACP,wBAAwB,CACzB;gBACH,CAAC,CAAC,SAAS,CAAC,EAEhB,aAAa,EAAE,CAAA,MAAA,KAAK,CAAC,aAAa,mCAAI,CAAC,KAAK,CAAC,yBAAyB,EAAC,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,EACrG,KAAK,EAAE,MAAA,KAAK,CAAC,KAAK,mCAAI,KAAK,CAAC,yBAAyB,0BAC/B,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC,CAAC,SAAS,EAC5G,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,IACzF,CACD,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useState } from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport {\n ContextualMenuItemType,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n IContextualMenuStyles\n} from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\nconst defaultLocalVideoViewOptions = {\n scalingMode: 'Crop',\n isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * Strings of CameraButton that can be overridden.\n *\n * @public\n */\nexport interface CameraButtonStrings {\n /** Label when button is on. */\n onLabel: string;\n /** Label when button is off. */\n offLabel: string;\n /** Tooltip content when the button is disabled. */\n tooltipDisabledContent?: string;\n /** Tooltip content when the button is on. */\n tooltipOnContent?: string;\n /** Tooltip content when the button is off. */\n tooltipOffContent?: string;\n /** Tooltip content when the button is disabled due to video loading. */\n tooltipVideoLoadingContent?: string;\n /**\n * Title of camera menu\n */\n cameraMenuTitle: string;\n /**\n * Tooltip of camera menu\n */\n cameraMenuTooltip: string;\n /**\n * description of camera button split button role\n */\n cameraButtonSplitRoleDescription?: string;\n /**\n * Camera split button aria label for when button is enabled.\n */\n onSplitButtonAriaLabel?: string;\n /**\n * Camera split button aria label for when button is disabled.\n */\n offSplitButtonAriaLabel?: string;\n /**\n * Camera action turned on string for announcer\n */\n cameraActionTurnedOnAnnouncement?: string;\n /**\n * Camera action turned off string for announcer\n */\n cameraActionTurnedOffAnnouncement?: string;\n /**\n * Primary action for when the camera is turned off\n */\n offSplitButtonPrimaryActionCamera?: string;\n /**\n * Primary action for when the camera is on\n */\n onSplitButtonPrimaryActionCamera?: string;\n /**\n * Title for primary action section of split button\n */\n cameraPrimaryActionSplitButtonTitle?: string;\n /* @conditional-compile-remove(video-background-effects) */\n /**\n * Title for video effects menu item\n */\n videoEffectsMenuItemTitle?: string;\n}\n\n/**\n * Styles for {@link CameraButton}\n *\n * @public\n */\nexport interface CameraButtonStyles extends ControlBarButtonStyles {\n /**\n * Styles for the {@link CameraButton} menu.\n */\n menuStyles?: Partial<CameraButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link CameraButton} menu.\n *\n * @public\n */\nexport interface CameraButtonContextualMenuStyles extends IContextualMenuStyles {\n /**\n * Styles for the items inside the {@link CameraButton} button menu.\n */\n menuItemStyles?: IContextualMenuItemStyles;\n}\n/**\n * Props for {@link CameraButton} component.\n *\n * @public\n */\nexport interface CameraButtonProps extends ControlBarButtonProps {\n /**\n * Utility property for using this component with `communication react eventHandlers`.\n * Maps directly to the `onClick` property.\n */\n onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;\n\n /**\n * Options for rendering local video view.\n */\n localVideoViewOptions?: VideoStreamOptions;\n /**\n * Available cameras for selection\n */\n cameras?: 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 * Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n *\n * default: false\n */\n enableDeviceSelectionMenu?: boolean;\n /**\n * Optional strings to override in component\n */\n strings?: Partial<CameraButtonStrings>;\n /**\n * Styles for {@link CameraButton} and the device selection flyout.\n */\n styles?: Partial<CameraButtonStyles>;\n /* @conditional-compile-remove(video-background-effects) */\n /**\n * Callback when a effects is clicked\n */\n onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;\n}\n\n/**\n * A button to turn camera on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const CameraButton = (props: CameraButtonProps): JSX.Element => {\n const { localVideoViewOptions, onToggleCamera } = props;\n const [waitForCamera, setWaitForCamera] = useState(false);\n const localeStrings = useLocale().strings.cameraButton;\n const strings = { ...localeStrings, ...props.strings };\n const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n\n const disabled = props.disabled || waitForCamera;\n\n const onRenderCameraOnIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOn\" />\n );\n const onRenderCameraOffIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOff\" />\n );\n if (waitForCamera && strings.tooltipVideoLoadingContent) {\n strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;\n }\n\n const cameraOn = props.checked;\n const splitButtonAriaString = cameraOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n\n const toggleAnnouncerString = useCallback(\n (isCameraOn: boolean) => {\n setAnnouncerString(\n !isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement\n );\n },\n [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]\n );\n\n const onToggleClick = useCallback(async () => {\n // Throttle click on camera, need to await onToggleCamera then allow another click\n if (onToggleCamera) {\n setWaitForCamera(true);\n try {\n await onToggleCamera(localVideoViewOptions ?? defaultLocalVideoViewOptions);\n // allows for the setting of narrator strings triggering the announcer when camera is turned on or off.\n toggleAnnouncerString(!cameraOn);\n } finally {\n setWaitForCamera(false);\n }\n }\n }, [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);\n\n const splitButtonMenuItems: IContextualMenuItem[] = [\n {\n key: 'cameraPrimaryAction',\n text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,\n onClick: () => {\n onToggleClick();\n },\n iconProps: {\n iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',\n styles: { root: { lineHeight: 0 } }\n }\n }\n ];\n /* @conditional-compile-remove(video-background-effects) */\n if (props.onShowVideoEffectsPicker) {\n splitButtonMenuItems.push({\n key: 'effects',\n text: strings.videoEffectsMenuItemTitle,\n iconProps: { iconName: 'OptionsVideoBackgroundEffect', styles: { root: { lineHeight: 0 } } },\n onClick: () => {\n if (props.onShowVideoEffectsPicker) {\n props.onShowVideoEffectsPicker(true);\n }\n }\n });\n }\n\n const splitButtonPrimaryAction: IContextualMenuItem = {\n key: 'primaryAction',\n title: 'toggle camera',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n topDivider: true,\n items: splitButtonMenuItems\n }\n };\n\n return (\n <>\n <Announcer announcementString={announcerString} ariaLive={'polite'} />\n <ControlBarButton\n {...props}\n disabled={disabled}\n onClick={onToggleCamera ? onToggleClick : props.onClick}\n onRenderOnIcon={props.onRenderOnIcon ?? onRenderCameraOnIcon}\n onRenderOffIcon={props.onRenderOffIcon ?? onRenderCameraOffIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'cameraButtonLabel'}\n menuProps={\n props.menuProps ??\n (props.enableDeviceSelectionMenu\n ? generateDefaultDeviceMenuProps(\n { ...props, styles: props.styles?.menuStyles },\n strings,\n splitButtonPrimaryAction\n )\n : undefined)\n }\n menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}\n split={props.split ?? props.enableDeviceSelectionMenu}\n aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined}\n splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n />\n </>\n );\n};\n"]}
1
+ {"version":3,"file":"CameraButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/CameraButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useState, useMemo } from 'react';\nimport { useLocale } from '../localization';\nimport { VideoStreamOptions } from '../types';\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n\nimport {\n ContextualMenuItemType,\n IButtonProps,\n IContextualMenuItem,\n IContextualMenuItemStyles,\n IContextualMenuStyles\n} from '@fluentui/react';\nimport { ControlBarButtonStyles } from './ControlBarButton';\nimport { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';\nimport { Announcer } from './Announcer';\n\nconst defaultLocalVideoViewOptions = {\n scalingMode: 'Crop',\n isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * Strings of CameraButton that can be overridden.\n *\n * @public\n */\nexport interface CameraButtonStrings {\n /** Label when button is on. */\n onLabel: string;\n /** Label when button is off. */\n offLabel: string;\n /** Tooltip content when the button is disabled. */\n tooltipDisabledContent?: string;\n /** Tooltip content when the button is on. */\n tooltipOnContent?: string;\n /** Tooltip content when the button is off. */\n tooltipOffContent?: string;\n /** Tooltip content when the button is disabled due to video loading. */\n tooltipVideoLoadingContent?: string;\n /**\n * Title of camera menu\n */\n cameraMenuTitle: string;\n /**\n * Tooltip of camera menu\n */\n cameraMenuTooltip: string;\n /**\n * description of camera button split button role\n */\n cameraButtonSplitRoleDescription?: string;\n /**\n * Camera split button aria label for when button is enabled.\n */\n onSplitButtonAriaLabel?: string;\n /**\n * Camera split button aria label for when button is disabled.\n */\n offSplitButtonAriaLabel?: string;\n /**\n * Camera action turned on string for announcer\n */\n cameraActionTurnedOnAnnouncement?: string;\n /**\n * Camera action turned off string for announcer\n */\n cameraActionTurnedOffAnnouncement?: string;\n /**\n * Primary action for when the camera is turned off\n */\n offSplitButtonPrimaryActionCamera?: string;\n /**\n * Primary action for when the camera is on\n */\n onSplitButtonPrimaryActionCamera?: string;\n /**\n * Title for primary action section of split button\n */\n cameraPrimaryActionSplitButtonTitle?: string;\n /* @conditional-compile-remove(video-background-effects) */\n /**\n * Title for video effects menu item\n */\n videoEffectsMenuItemTitle?: string;\n}\n\n/**\n * Styles for {@link CameraButton}\n *\n * @public\n */\nexport interface CameraButtonStyles extends ControlBarButtonStyles {\n /**\n * Styles for the {@link CameraButton} menu.\n */\n menuStyles?: Partial<CameraButtonContextualMenuStyles>;\n}\n\n/**\n * Styles for the {@link CameraButton} menu.\n *\n * @public\n */\nexport interface CameraButtonContextualMenuStyles extends IContextualMenuStyles {\n /**\n * Styles for the items inside the {@link CameraButton} button menu.\n */\n menuItemStyles?: IContextualMenuItemStyles;\n}\n/**\n * Props for {@link CameraButton} component.\n *\n * @public\n */\nexport interface CameraButtonProps extends ControlBarButtonProps {\n /**\n * Utility property for using this component with `communication react eventHandlers`.\n * Maps directly to the `onClick` property.\n */\n onToggleCamera?: (options?: VideoStreamOptions) => Promise<void>;\n\n /**\n * Options for rendering local video view.\n */\n localVideoViewOptions?: VideoStreamOptions;\n /**\n * Available cameras for selection\n */\n cameras?: 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 * Whether to use a {@link SplitButton} with a {@link IContextualMenu} for device selection.\n *\n * default: false\n */\n enableDeviceSelectionMenu?: boolean;\n /**\n * Optional strings to override in component\n */\n strings?: Partial<CameraButtonStrings>;\n /**\n * Styles for {@link CameraButton} and the device selection flyout.\n */\n styles?: Partial<CameraButtonStyles>;\n /* @conditional-compile-remove(video-background-effects) */\n /**\n * Callback when a effects is clicked\n */\n onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;\n}\n\n/**\n * A button to turn camera on / off.\n *\n * Can be used with {@link ControlBar}.\n *\n * @public\n */\nexport const CameraButton = (props: CameraButtonProps): JSX.Element => {\n const { localVideoViewOptions, onToggleCamera } = props;\n const [waitForCamera, setWaitForCamera] = useState(false);\n const localeStrings = useLocale().strings.cameraButton;\n const strings = { ...localeStrings, ...props.strings };\n const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);\n\n const disabled = props.disabled || waitForCamera;\n\n const onRenderCameraOnIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOn\" />\n );\n const onRenderCameraOffIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={disabled} iconName=\"ControlButtonCameraOff\" />\n );\n if (waitForCamera && strings.tooltipVideoLoadingContent) {\n strings.tooltipDisabledContent = strings.tooltipVideoLoadingContent;\n }\n\n const cameraOn = props.checked;\n const splitButtonAriaString = cameraOn ? strings.onSplitButtonAriaLabel : strings.offSplitButtonAriaLabel;\n\n const toggleAnnouncerString = useCallback(\n (isCameraOn: boolean) => {\n setAnnouncerString(\n !isCameraOn ? strings.cameraActionTurnedOffAnnouncement : strings.cameraActionTurnedOnAnnouncement\n );\n },\n [strings.cameraActionTurnedOffAnnouncement, strings.cameraActionTurnedOnAnnouncement]\n );\n\n const onToggleClick = useCallback(async () => {\n // Throttle click on camera, need to await onToggleCamera then allow another click\n if (onToggleCamera) {\n setWaitForCamera(true);\n try {\n await onToggleCamera(localVideoViewOptions ?? defaultLocalVideoViewOptions);\n // allows for the setting of narrator strings triggering the announcer when camera is turned on or off.\n toggleAnnouncerString(!cameraOn);\n } finally {\n setWaitForCamera(false);\n }\n }\n }, [cameraOn, localVideoViewOptions, onToggleCamera, toggleAnnouncerString]);\n\n const splitButtonMenuItems: IContextualMenuItem[] = [\n {\n key: 'cameraPrimaryAction',\n text: props.checked ? strings.onSplitButtonPrimaryActionCamera : strings.offSplitButtonPrimaryActionCamera,\n onClick: () => {\n onToggleClick();\n },\n iconProps: {\n iconName: props.checked ? 'SplitButtonPrimaryActionCameraOn' : 'SplitButtonPrimaryActionCameraOff',\n styles: { root: { lineHeight: 0 } }\n }\n }\n ];\n /* @conditional-compile-remove(video-background-effects) */\n if (props.onShowVideoEffectsPicker) {\n splitButtonMenuItems.push({\n key: 'effects',\n 'data-ui-id': 'camera-split-button-video-effects',\n text: strings.videoEffectsMenuItemTitle,\n iconProps: { iconName: 'OptionsVideoBackgroundEffect', styles: { root: { lineHeight: 0 } } },\n onClick: () => {\n if (props.onShowVideoEffectsPicker) {\n props.onShowVideoEffectsPicker(true);\n }\n }\n });\n }\n\n const splitButtonPrimaryAction: IContextualMenuItem = {\n key: 'primaryAction',\n title: 'toggle camera',\n itemType: ContextualMenuItemType.Section,\n sectionProps: {\n topDivider: true,\n items: splitButtonMenuItems\n }\n };\n\n const splitButtonMenuProps: IButtonProps = useMemo(\n () => ({\n ...props.splitButtonMenuProps,\n className: 'camera-split-button'\n }),\n [props.splitButtonMenuProps]\n );\n\n return (\n <>\n <Announcer announcementString={announcerString} ariaLive={'polite'} />\n <ControlBarButton\n {...props}\n disabled={disabled}\n onClick={onToggleCamera ? onToggleClick : props.onClick}\n onRenderOnIcon={props.onRenderOnIcon ?? onRenderCameraOnIcon}\n onRenderOffIcon={props.onRenderOffIcon ?? onRenderCameraOffIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'cameraButtonLabel'}\n menuProps={\n props.menuProps ??\n (props.enableDeviceSelectionMenu\n ? generateDefaultDeviceMenuProps(\n { ...props, styles: props.styles?.menuStyles },\n strings,\n splitButtonPrimaryAction\n )\n : undefined)\n }\n menuIconProps={props.menuIconProps ?? !props.enableDeviceSelectionMenu ? { hidden: true } : undefined}\n split={props.split ?? props.enableDeviceSelectionMenu}\n aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined}\n splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n splitButtonMenuProps={splitButtonMenuProps}\n />\n </>\n );\n};\n"]}