@azure/communication-react 1.19.0-alpha-202408280014 → 1.19.0-alpha-202408300015
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.
- package/dist/communication-react.d.ts +78 -4
- package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-JpEHAh2h.js → ChatMessageComponentAsRichTextEditBox-DF6m5c0M.js} +2 -2
- package/dist/dist-cjs/communication-react/{ChatMessageComponentAsRichTextEditBox-JpEHAh2h.js.map → ChatMessageComponentAsRichTextEditBox-DF6m5c0M.js.map} +1 -1
- package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-ujBB-J3D.js → RichTextSendBoxWrapper-5MZMlGmn.js} +2 -2
- package/dist/dist-cjs/communication-react/{RichTextSendBoxWrapper-ujBB-J3D.js.map → RichTextSendBoxWrapper-5MZMlGmn.js.map} +1 -1
- package/dist/dist-cjs/communication-react/{index-D_pIA4Nc.js → index-DQfE9Pq_.js} +538 -368
- package/dist/dist-cjs/communication-react/index-DQfE9Pq_.js.map +1 -0
- package/dist/dist-cjs/communication-react/index.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/CameraButton.d.ts +4 -0
- package/dist/dist-esm/react-components/src/components/CameraButton.js +1 -1
- package/dist/dist-esm/react-components/src/components/CameraButton.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/IncomingCallNotification.d.ts +4 -0
- package/dist/dist-esm/react-components/src/components/IncomingCallNotification.js +13 -10
- package/dist/dist-esm/react-components/src/components/IncomingCallNotification.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/IncomingCallStack.d.ts +5 -0
- package/dist/dist-esm/react-components/src/components/IncomingCallStack.js +3 -2
- package/dist/dist-esm/react-components/src/components/IncomingCallStack.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/LocalVideoTile.d.ts +1 -0
- package/dist/dist-esm/react-components/src/components/LocalVideoTile.js +18 -5
- package/dist/dist-esm/react-components/src/components/LocalVideoTile.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/MicrophoneButton.d.ts +28 -0
- package/dist/dist-esm/react-components/src/components/MicrophoneButton.js +29 -1
- package/dist/dist-esm/react-components/src/components/MicrophoneButton.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextEditor.js +10 -5
- package/dist/dist-esm/react-components/src/components/RichTextEditor/RichTextEditor.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.js +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery/useVideoTileContextualMenuProps.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoGallery.d.ts +2 -0
- package/dist/dist-esm/react-components/src/components/VideoGallery.js +3 -2
- package/dist/dist-esm/react-components/src/components/VideoGallery.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.d.ts +13 -1
- package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js +36 -0
- package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/localization/locales/ar-SA/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/cs-CZ/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/de-DE/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/en-GB/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json +18 -10
- package/dist/dist-esm/react-components/src/localization/locales/es-ES/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/fi-FI/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/fr-FR/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/he-IL/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/it-IT/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/ja-JP/strings.json +26 -1
- package/dist/dist-esm/react-components/src/localization/locales/ko-KR/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/nb-NO/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/nl-NL/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/pl-PL/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/pt-BR/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/ru-RU/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/sv-SE/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/tr-TR/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/zh-CN/strings.json +25 -0
- package/dist/dist-esm/react-components/src/localization/locales/zh-TW/strings.json +25 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.d.ts +3 -4
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js +41 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/AzureCommunicationCallAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapter.d.ts +31 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/CallAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/index.d.ts +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/adapter/index.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js +29 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Microphone.d.ts +2 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Microphone.js +5 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Microphone.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/index.d.ts +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/index.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.d.ts +3 -4
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js +2 -2
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/AzureCommunicationCallWithChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.d.ts +3 -4
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.d.ts +3 -4
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.js +5 -5
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/adapter/CallWithChatBackedCallAdapter.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js +18 -1
- package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/localization/locales/ar-SA/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/cs-CZ/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/de-DE/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/en-GB/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/es-ES/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/fi-FI/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/fr-FR/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/he-IL/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/it-IT/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/ja-JP/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/ko-KR/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/nb-NO/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/nl-NL/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/pl-PL/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/pt-BR/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/ru-RU/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/sv-SE/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/tr-TR/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/zh-CN/strings.json +12 -2
- package/dist/dist-esm/react-composites/src/composites/localization/locales/zh-TW/strings.json +12 -2
- package/package.json +3 -3
- package/dist/dist-cjs/communication-react/index-D_pIA4Nc.js.map +0 -1
@@ -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.19.0-alpha-
|
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.19.0-alpha-202408300015';\n"]}
|
@@ -66,6 +66,10 @@ export interface CameraButtonStrings {
|
|
66
66
|
* Title for video effects menu item
|
67
67
|
*/
|
68
68
|
videoEffectsMenuItemTitle?: string;
|
69
|
+
/**
|
70
|
+
* Aria description for camera button
|
71
|
+
*/
|
72
|
+
cameraButtonAriaDescription?: string;
|
69
73
|
}
|
70
74
|
/**
|
71
75
|
* Styles for {@link CameraButton}
|
@@ -110,6 +110,6 @@ export const CameraButton = (props) => {
|
|
110
110
|
React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
|
111
111
|
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
|
112
112
|
? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { onSelectCamera: onChangeCameraClick, styles: (_e = props.styles) === null || _e === void 0 ? void 0 : _e.menuStyles }), strings, splitButtonPrimaryAction)
|
113
|
-
: 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 }))));
|
113
|
+
: 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-description": strings.cameraButtonAriaDescription, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined, splitButtonMenuProps: splitButtonMenuProps }))));
|
114
114
|
};
|
115
115
|
//# sourceMappingURL=CameraButton.js.map
|
@@ -1 +1 @@
|
|
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\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\n /**\n * Callback when a effects is clicked\n */\n onClickVideoEffects?: (showVideoEffects: 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, onSelectCamera } = 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 onChangeCameraClick = useCallback(\n async (device: OptionsDevice) => {\n // Throttle changing camera to prevent too many callbacks\n if (onSelectCamera) {\n setWaitForCamera(true);\n try {\n await onSelectCamera(device);\n } finally {\n setWaitForCamera(false);\n }\n }\n },\n [onSelectCamera]\n );\n\n const splitButtonMenuItems: IContextualMenuItem[] = [];\n\n if (props.onClickVideoEffects) {\n splitButtonMenuItems.push({\n key: 'effects',\n 'data-ui-id': 'camera-split-button-video-effects',\n text: strings.videoEffectsMenuItemTitle,\n iconProps: { iconName: 'ControlButtonVideoEffectsOption', styles: { root: { lineHeight: 0 } } },\n onClick: () => {\n if (props.onClickVideoEffects) {\n props.onClickVideoEffects(true);\n }\n }\n });\n }\n\n splitButtonMenuItems.push({\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 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, onSelectCamera: onChangeCameraClick, 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"]}
|
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,OAAO,EAAE,MAAM,OAAO,CAAC;AAC9D,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,EAKvB,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;AA8IxB;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAe,EAAE;;IACpE,MAAM,EAAE,qBAAqB,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IACxE,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,CAAC;QACxD,OAAO,CAAC,sBAAsB,GAAG,OAAO,CAAC,0BAA0B,CAAC;IACtE,CAAC;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,CAAC;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,CAAC;gBACH,MAAM,cAAc,CAAC,qBAAqB,aAArB,qBAAqB,cAArB,qBAAqB,GAAI,4BAA4B,CAAC,CAAC;gBAC5E,uGAAuG;gBACvG,qBAAqB,CAAC,CAAC,QAAQ,CAAC,CAAC;YACnC,CAAC;oBAAS,CAAC;gBACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,CAAA,EAAE,CAAC,QAAQ,EAAE,qBAAqB,EAAE,cAAc,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE7E,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAO,MAAqB,EAAE,EAAE;QAC9B,yDAAyD;QACzD,IAAI,cAAc,EAAE,CAAC;YACnB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,CAAC;gBACH,MAAM,cAAc,CAAC,MAAM,CAAC,CAAC;YAC/B,CAAC;oBAAS,CAAC;gBACT,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,CAAA,EACD,CAAC,cAAc,CAAC,CACjB,CAAC;IAEF,MAAM,oBAAoB,GAA0B,EAAE,CAAC;IAEvD,IAAI,KAAK,CAAC,mBAAmB,EAAE,CAAC;QAC9B,oBAAoB,CAAC,IAAI,CAAC;YACxB,GAAG,EAAE,SAAS;YACd,YAAY,EAAE,mCAAmC;YACjD,IAAI,EAAE,OAAO,CAAC,yBAAyB;YACvC,SAAS,EAAE,EAAE,QAAQ,EAAE,iCAAiC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,EAAE;YAC/F,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,KAAK,CAAC,mBAAmB,EAAE,CAAC;oBAC9B,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;gBAClC,CAAC;YACH,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAED,oBAAoB,CAAC,IAAI,CAAC;QACxB,GAAG,EAAE,qBAAqB;QAC1B,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,gCAAgC,CAAC,CAAC,CAAC,OAAO,CAAC,iCAAiC;QAC1G,OAAO,EAAE,GAAG,EAAE;YACZ,aAAa,EAAE,CAAC;QAClB,CAAC;QACD,SAAS,EAAE;YACT,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,mCAAmC;YAClG,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE;SACpC;KACF,CAAC,CAAC;IAEH,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,MAAM,oBAAoB,GAAiB,OAAO,CAChD,GAAG,EAAE,CAAC,iCACD,KAAK,CAAC,oBAAoB,KAC7B,SAAS,EAAE,qBAAqB,IAChC,EACF,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAC7B,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,cAAc,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,UAAU,KACjF,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,sBACnC,OAAO,CAAC,2BAA2B,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,EACzF,oBAAoB,EAAE,oBAAoB,IAC1C,CACD,CACJ,CAAC;AACJ,CAAC,CAAC","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 /**\n * Title for video effects menu item\n */\n videoEffectsMenuItemTitle?: string;\n /**\n * Aria description for camera button\n */\n cameraButtonAriaDescription?: 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\n /**\n * Callback when a effects is clicked\n */\n onClickVideoEffects?: (showVideoEffects: 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, onSelectCamera } = 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 onChangeCameraClick = useCallback(\n async (device: OptionsDevice) => {\n // Throttle changing camera to prevent too many callbacks\n if (onSelectCamera) {\n setWaitForCamera(true);\n try {\n await onSelectCamera(device);\n } finally {\n setWaitForCamera(false);\n }\n }\n },\n [onSelectCamera]\n );\n\n const splitButtonMenuItems: IContextualMenuItem[] = [];\n\n if (props.onClickVideoEffects) {\n splitButtonMenuItems.push({\n key: 'effects',\n 'data-ui-id': 'camera-split-button-video-effects',\n text: strings.videoEffectsMenuItemTitle,\n iconProps: { iconName: 'ControlButtonVideoEffectsOption', styles: { root: { lineHeight: 0 } } },\n onClick: () => {\n if (props.onClickVideoEffects) {\n props.onClickVideoEffects(true);\n }\n }\n });\n }\n\n splitButtonMenuItems.push({\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 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, onSelectCamera: onChangeCameraClick, 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-description={strings.cameraButtonAriaDescription}\n aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined}\n splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}\n splitButtonMenuProps={splitButtonMenuProps}\n />\n </>\n );\n};\n"]}
|
@@ -38,6 +38,10 @@ export interface IncomingCallNotificationStrings {
|
|
38
38
|
* label for the reject button in the incoming call notification.
|
39
39
|
*/
|
40
40
|
incomingCallNotificationRejectButtonLabel?: string;
|
41
|
+
/**
|
42
|
+
* Aria label for the incoming call dismiss button
|
43
|
+
*/
|
44
|
+
incomingCallNotificationDismissButtonAriaLabel?: string;
|
41
45
|
}
|
42
46
|
/**
|
43
47
|
* Styles for the incoming call notification component.
|
@@ -11,7 +11,7 @@ import { _formatString } from "../../../acs-ui-common/src";
|
|
11
11
|
* @beta
|
12
12
|
*/
|
13
13
|
export const IncomingCallNotification = (props) => {
|
14
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
14
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
15
15
|
const { callerName, alertText, avatarImage, onAcceptWithAudio,
|
16
16
|
/* @conditional-compile-remove(one-to-n-calling) */
|
17
17
|
onAcceptWithVideo, onReject, onDismiss, personaSize, styles, strings,
|
@@ -48,21 +48,24 @@ export const IncomingCallNotification = (props) => {
|
|
48
48
|
React.createElement(Stack, { horizontalAlign: "start", styles: (styles === null || styles === void 0 ? void 0 : styles.avatarContainer) ? styles.avatarContainer : incomingCallToastAvatarContainerStyle },
|
49
49
|
React.createElement(Persona, { imageUrl: avatarImage, text: callerName, size: PersonaSize.size24, coinSize: personaSize, hidePersonaDetails: true, "aria-label": callerName })),
|
50
50
|
React.createElement(Stack, { grow: true, horizontalAlign: "center", style: { alignItems: 'flex-start', fontFamily: 'Segoe UI' } },
|
51
|
-
React.createElement(
|
52
|
-
|
53
|
-
|
54
|
-
|
51
|
+
React.createElement(Text, { tabIndex: 0, "aria-live": 'assertive', "aria-label": alertText !== null && alertText !== void 0 ? alertText : formattedMessageString }, (_c = alertText !== null && alertText !== void 0 ? alertText : strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationPlaceholderAlert) !== null && _c !== void 0 ? _c :
|
52
|
+
/* @conditional-compile-remove(one-to-n-calling) */ formattedMessageString)),
|
53
|
+
React.createElement(IconButton
|
54
|
+
/* @conditional-compile-remove(one-to-n-calling) */
|
55
|
+
, {
|
56
|
+
/* @conditional-compile-remove(one-to-n-calling) */
|
57
|
+
ariaLabel: (_d = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationDismissButtonAriaLabel) !== null && _d !== void 0 ? _d : localeStrings.incomingCallNotificationDismissButtonAriaLabel, iconProps: { iconName: 'cancel' }, onClick: onDismiss, styles: dismissButtonStyle(theme) })),
|
55
58
|
React.createElement(Stack, { horizontal: true, horizontalAlign: 'center', tokens: { childrenGap: '0.5rem' } },
|
56
59
|
React.createElement(PrimaryButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.acceptButton) ? styles.acceptButton : incomingCallAcceptButtonStyle(theme), onClick: () => onAcceptWithAudio(), iconProps: { iconName: 'IncomingCallNotificationAcceptIcon', style: { lineHeight: '1rem' } },
|
57
60
|
/* @conditional-compile-remove(one-to-n-calling) */
|
58
|
-
ariaLabel: (
|
61
|
+
ariaLabel: (_e = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationAcceptWithAudioAriaLabel) !== null && _e !== void 0 ? _e : localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel,
|
59
62
|
/* @conditional-compile-remove(one-to-n-calling) */
|
60
63
|
menuProps: acceptManuOptions },
|
61
|
-
/* @conditional-compile-remove(one-to-n-calling) */ (
|
62
|
-
React.createElement(DefaultButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.rejectButton) ? styles.rejectButton : incomingCallRejectButtonStyle(theme), onClick: () => onReject(),
|
64
|
+
/* @conditional-compile-remove(one-to-n-calling) */ (_f = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationAcceptButtonLabel) !== null && _f !== void 0 ? _f : localeStrings.incomingCallNotificationAcceptButtonLabel),
|
65
|
+
React.createElement(DefaultButton, { styles: (styles === null || styles === void 0 ? void 0 : styles.rejectButton) ? styles.rejectButton : incomingCallRejectButtonStyle(theme), onClick: () => onReject(), iconProps: { iconName: 'IncomingCallNotificationRejectIcon' },
|
63
66
|
/* @conditional-compile-remove(one-to-n-calling) */
|
64
|
-
ariaLabel: (
|
65
|
-
/* @conditional-compile-remove(one-to-n-calling) */ (
|
67
|
+
ariaLabel: (_g = strings === null || strings === void 0 ? void 0 : strings.incomingCallNoticicationRejectAriaLabel) !== null && _g !== void 0 ? _g : localeStrings.incomingCallNoticicationRejectAriaLabel },
|
68
|
+
/* @conditional-compile-remove(one-to-n-calling) */ (_h = strings === null || strings === void 0 ? void 0 : strings.incomingCallNotificationRejectButtonLabel) !== null && _h !== void 0 ? _h : localeStrings.incomingCallNotificationRejectButtonLabel))));
|
66
69
|
};
|
67
70
|
const incomingCallToastStyle = (theme) => {
|
68
71
|
return {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"IncomingCallNotification.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/IncomingCallNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n DefaultButton,\n IButtonStyles,\n IconButton,\n IStackStyles,\n Persona,\n PersonaSize,\n PrimaryButton,\n Stack,\n Text,\n Theme,\n useTheme\n} from '@fluentui/react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { IContextualMenuProps } from '@fluentui/react';\nimport React from 'react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { useLocale } from '../localization';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Strings for the incoming call notification component.\n *\n * @beta\n */\nexport interface IncomingCallNotificationStrings {\n /**\n * Placeholder CallerID for the incoming call notification.\n */\n incomingCallNotificationPlaceholderId?: string;\n /**\n * Placeholder Alert for the incoming call notification.\n */\n incomingCallNotificationPlaceholderAlert?: string;\n /**\n * Aria label for the accept with audio button in the incoming call notification.\n */\n incomingCallNoticicationAcceptWithAudioAriaLabel?: string;\n /**\n * Aria label for the accept with video button in the incoming call notification.\n */\n incomingCallNoticicationAcceptWithVideoAriaLabel?: string;\n /**\n * Aria label for the reject button in the incoming call notification.\n */\n incomingCallNoticicationRejectAriaLabel?: string;\n /**\n * Label for the accept button in the incoming call notification.\n */\n incomingCallNotificationAcceptButtonLabel?: string;\n /**\n * Label for the accept with video button in the incoming call notification.\n */\n incomingCallNotificationAccceptWithVideoButtonLabel?: string;\n /**\n * label for the reject button in the incoming call notification.\n */\n incomingCallNotificationRejectButtonLabel?: string;\n}\n\n/**\n * Styles for the incoming call notification component.\n *\n * @beta\n */\nexport interface IncomingCallNotificationStyles {\n /**\n * Styles for the accept buttons.\n */\n acceptButton?: IButtonStyles;\n /**\n * Styles for the reject button.\n */\n rejectButton?: IButtonStyles;\n /**\n * Styles for the root container.\n */\n root?: IStackStyles;\n /**\n * Styles for the avatar container.\n */\n avatarContainer?: IStackStyles;\n}\n\n/**\n * Properties for the incoming call notification component.\n *\n * @beta\n */\nexport interface IncomingCallNotificationProps {\n /**\n * Caller's Name\n */\n callerName?: string;\n /**\n * Alert Text\"\n */\n alertText?: string;\n /**\n * URL to the avatar image for the user\n */\n avatarImage?: string;\n /**\n * Size of the persona coin\n */\n personaSize?: number;\n /**\n * Callback to render the avatar\n */\n onRenderAvatar?: () => JSX.Element;\n /**\n * Callback to accept the call with audio\n */\n onAcceptWithAudio: () => void;\n /**\n * Callback to accept the call with Video\n */\n onAcceptWithVideo: () => void;\n /**\n * Callback to reject the call\n */\n onReject: () => void;\n /**\n * Callback when the notification is dismissed\n */\n onDismiss?: () => void;\n /**\n * Styles for the incoming call notification component.\n */\n styles?: IncomingCallNotificationStyles;\n /**\n * Strings for the incoming call notification component.\n */\n strings?: IncomingCallNotificationStrings;\n /**\n * Options for whether to show the accept with video button\n */\n acceptOptions: {\n showAcceptWithVideo: boolean;\n };\n}\n\n/**\n * A Notification component that is to be used to represent incoming calls to the end user.\n * Allows the user to accept or reject the incoming call.\n * @beta\n */\nexport const IncomingCallNotification = (props: IncomingCallNotificationProps): JSX.Element => {\n const {\n callerName,\n alertText,\n avatarImage,\n onAcceptWithAudio,\n /* @conditional-compile-remove(one-to-n-calling) */\n onAcceptWithVideo,\n onReject,\n onDismiss,\n personaSize,\n styles,\n strings,\n /* @conditional-compile-remove(one-to-n-calling) */\n acceptOptions\n } = props;\n const theme = useTheme();\n /* @conditional-compile-remove(one-to-n-calling) */\n const localeStrings = useLocale().strings.IncomingCallNotification;\n /* @conditional-compile-remove(one-to-n-calling) */\n const formattedMessageString =\n localeStrings.incomingCallNotificationPlaceholderAlert && callerName\n ? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, { callerName: callerName })\n : callerName;\n\n /* @conditional-compile-remove(one-to-n-calling) */\n const acceptManuOptions: IContextualMenuProps | undefined = acceptOptions.showAcceptWithVideo\n ? {\n items: [\n {\n key: 'audio',\n text:\n /* @conditional-compile-remove(one-to-n-calling) */ strings?.incomingCallNotificationAcceptButtonLabel ??\n localeStrings.incomingCallNotificationAcceptButtonLabel,\n onClick: () => onAcceptWithAudio()\n },\n {\n key: 'video',\n text:\n /* @conditional-compile-remove(one-to-n-calling) */ strings?.incomingCallNotificationAccceptWithVideoButtonLabel ??\n localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,\n onClick: () => onAcceptWithVideo()\n }\n ]\n }\n : undefined;\n\n return (\n <Stack\n tokens={{ childrenGap: '0.5rem' }}\n verticalAlign=\"center\"\n styles={styles?.root ? styles.root : incomingCallToastStyle(theme)}\n >\n <Stack horizontal verticalAlign=\"center\" tokens={{ childrenGap: personaSize ? '0.5rem' : '0rem' }}>\n <Stack\n horizontalAlign=\"start\"\n styles={styles?.avatarContainer ? styles.avatarContainer : incomingCallToastAvatarContainerStyle}\n >\n <Persona\n imageUrl={avatarImage}\n text={callerName}\n size={PersonaSize.size24}\n coinSize={personaSize}\n hidePersonaDetails={true}\n aria-label={callerName}\n />\n </Stack>\n\n <Stack grow horizontalAlign=\"center\" style={{ alignItems: 'flex-start', fontFamily: 'Segoe UI' }}>\n <Stack style={{ fontSize: '0.75rem' }}>\n <Text>\n {alertText ??\n strings?.incomingCallNotificationPlaceholderAlert ??\n /* @conditional-compile-remove(one-to-n-calling) */ formattedMessageString}\n </Text>\n </Stack>\n </Stack>\n <IconButton iconProps={{ iconName: 'cancel' }} onClick={onDismiss} styles={dismissButtonStyle(theme)} />\n </Stack>\n\n <Stack horizontal horizontalAlign={'center'} tokens={{ childrenGap: '0.5rem' }}>\n <PrimaryButton\n styles={styles?.acceptButton ? styles.acceptButton : incomingCallAcceptButtonStyle(theme)}\n onClick={() => onAcceptWithAudio()}\n iconProps={{ iconName: 'IncomingCallNotificationAcceptIcon', style: { lineHeight: '1rem' } }}\n /* @conditional-compile-remove(one-to-n-calling) */\n ariaLabel={\n strings?.incomingCallNoticicationAcceptWithAudioAriaLabel ??\n localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel\n }\n /* @conditional-compile-remove(one-to-n-calling) */\n menuProps={acceptManuOptions}\n >\n {\n /* @conditional-compile-remove(one-to-n-calling) */ strings?.incomingCallNotificationAcceptButtonLabel ??\n localeStrings.incomingCallNotificationAcceptButtonLabel\n }\n </PrimaryButton>\n <DefaultButton\n styles={styles?.rejectButton ? styles.rejectButton : incomingCallRejectButtonStyle(theme)}\n onClick={() => onReject()}\n label={'Decline'}\n iconProps={{ iconName: 'IncomingCallNotificationRejectIcon' }}\n /* @conditional-compile-remove(one-to-n-calling) */\n ariaLabel={\n strings?.incomingCallNoticicationRejectAriaLabel ?? localeStrings.incomingCallNoticicationRejectAriaLabel\n }\n >\n {\n /* @conditional-compile-remove(one-to-n-calling) */ strings?.incomingCallNotificationRejectButtonLabel ??\n localeStrings.incomingCallNotificationRejectButtonLabel\n }\n </DefaultButton>\n </Stack>\n </Stack>\n );\n};\n\nconst incomingCallToastStyle = (theme: Theme): IStackStyles => {\n return {\n root: {\n width: '20rem',\n background: theme.palette.white,\n opacity: 0.95,\n borderRadius: '0.5rem',\n boxShadow: theme.effects.elevation8,\n padding: '1rem'\n }\n };\n};\n\nconst incomingCallToastAvatarContainerStyle: IStackStyles = {\n root: {\n marginRight: '0.5rem'\n }\n};\n\nconst dismissButtonStyle = (theme: Theme): IButtonStyles => {\n return {\n root: {\n color: theme.palette.neutralPrimary,\n width: '1rem',\n height: '1rem'\n },\n rootHovered: {\n color: theme.palette.neutralDark\n }\n };\n};\n\nconst incomingCallAcceptButtonStyle = (theme: Theme): IButtonStyles => {\n return {\n root: {\n color: theme.palette.white,\n border: 'none',\n borderRadius: theme.effects.roundedCorner4,\n width: '100%',\n maxWidth: '8.875rem'\n },\n rootHovered: {\n color: theme.palette.white\n },\n icon: {\n height: '1.25rem'\n }\n };\n};\n\nconst incomingCallRejectButtonStyle = (theme: Theme): IButtonStyles => {\n return {\n root: {\n borderRadius: theme.effects.roundedCorner4,\n maxWidth: '8.875rem',\n width: '100%'\n },\n icon: {\n height: '1.25rem'\n }\n };\n};\n"]}
|
1
|
+
{"version":3,"file":"IncomingCallNotification.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/IncomingCallNotification.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n DefaultButton,\n IButtonStyles,\n IconButton,\n IStackStyles,\n Persona,\n PersonaSize,\n PrimaryButton,\n Stack,\n Text,\n Theme,\n useTheme\n} from '@fluentui/react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { IContextualMenuProps } from '@fluentui/react';\nimport React from 'react';\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { useLocale } from '../localization';\nimport { _formatString } from '@internal/acs-ui-common';\n\n/**\n * Strings for the incoming call notification component.\n *\n * @beta\n */\nexport interface IncomingCallNotificationStrings {\n /**\n * Placeholder CallerID for the incoming call notification.\n */\n incomingCallNotificationPlaceholderId?: string;\n /**\n * Placeholder Alert for the incoming call notification.\n */\n incomingCallNotificationPlaceholderAlert?: string;\n /**\n * Aria label for the accept with audio button in the incoming call notification.\n */\n incomingCallNoticicationAcceptWithAudioAriaLabel?: string;\n /**\n * Aria label for the accept with video button in the incoming call notification.\n */\n incomingCallNoticicationAcceptWithVideoAriaLabel?: string;\n /**\n * Aria label for the reject button in the incoming call notification.\n */\n incomingCallNoticicationRejectAriaLabel?: string;\n /**\n * Label for the accept button in the incoming call notification.\n */\n incomingCallNotificationAcceptButtonLabel?: string;\n /**\n * Label for the accept with video button in the incoming call notification.\n */\n incomingCallNotificationAccceptWithVideoButtonLabel?: string;\n /**\n * label for the reject button in the incoming call notification.\n */\n incomingCallNotificationRejectButtonLabel?: string;\n /**\n * Aria label for the incoming call dismiss button\n */\n incomingCallNotificationDismissButtonAriaLabel?: string;\n}\n\n/**\n * Styles for the incoming call notification component.\n *\n * @beta\n */\nexport interface IncomingCallNotificationStyles {\n /**\n * Styles for the accept buttons.\n */\n acceptButton?: IButtonStyles;\n /**\n * Styles for the reject button.\n */\n rejectButton?: IButtonStyles;\n /**\n * Styles for the root container.\n */\n root?: IStackStyles;\n /**\n * Styles for the avatar container.\n */\n avatarContainer?: IStackStyles;\n}\n\n/**\n * Properties for the incoming call notification component.\n *\n * @beta\n */\nexport interface IncomingCallNotificationProps {\n /**\n * Caller's Name\n */\n callerName?: string;\n /**\n * Alert Text\"\n */\n alertText?: string;\n /**\n * URL to the avatar image for the user\n */\n avatarImage?: string;\n /**\n * Size of the persona coin\n */\n personaSize?: number;\n /**\n * Callback to render the avatar\n */\n onRenderAvatar?: () => JSX.Element;\n /**\n * Callback to accept the call with audio\n */\n onAcceptWithAudio: () => void;\n /**\n * Callback to accept the call with Video\n */\n onAcceptWithVideo: () => void;\n /**\n * Callback to reject the call\n */\n onReject: () => void;\n /**\n * Callback when the notification is dismissed\n */\n onDismiss?: () => void;\n /**\n * Styles for the incoming call notification component.\n */\n styles?: IncomingCallNotificationStyles;\n /**\n * Strings for the incoming call notification component.\n */\n strings?: IncomingCallNotificationStrings;\n /**\n * Options for whether to show the accept with video button\n */\n acceptOptions: {\n showAcceptWithVideo: boolean;\n };\n}\n\n/**\n * A Notification component that is to be used to represent incoming calls to the end user.\n * Allows the user to accept or reject the incoming call.\n * @beta\n */\nexport const IncomingCallNotification = (props: IncomingCallNotificationProps): JSX.Element => {\n const {\n callerName,\n alertText,\n avatarImage,\n onAcceptWithAudio,\n /* @conditional-compile-remove(one-to-n-calling) */\n onAcceptWithVideo,\n onReject,\n onDismiss,\n personaSize,\n styles,\n strings,\n /* @conditional-compile-remove(one-to-n-calling) */\n acceptOptions\n } = props;\n const theme = useTheme();\n /* @conditional-compile-remove(one-to-n-calling) */\n const localeStrings = useLocale().strings.IncomingCallNotification;\n /* @conditional-compile-remove(one-to-n-calling) */\n const formattedMessageString =\n localeStrings.incomingCallNotificationPlaceholderAlert && callerName\n ? _formatString(localeStrings.incomingCallNotificationPlaceholderAlert, { callerName: callerName })\n : callerName;\n\n /* @conditional-compile-remove(one-to-n-calling) */\n const acceptManuOptions: IContextualMenuProps | undefined = acceptOptions.showAcceptWithVideo\n ? {\n items: [\n {\n key: 'audio',\n text:\n /* @conditional-compile-remove(one-to-n-calling) */ strings?.incomingCallNotificationAcceptButtonLabel ??\n localeStrings.incomingCallNotificationAcceptButtonLabel,\n onClick: () => onAcceptWithAudio()\n },\n {\n key: 'video',\n text:\n /* @conditional-compile-remove(one-to-n-calling) */ strings?.incomingCallNotificationAccceptWithVideoButtonLabel ??\n localeStrings.incomingCallNotificationAccceptWithVideoButtonLabel,\n onClick: () => onAcceptWithVideo()\n }\n ]\n }\n : undefined;\n\n return (\n <Stack\n tokens={{ childrenGap: '0.5rem' }}\n verticalAlign=\"center\"\n styles={styles?.root ? styles.root : incomingCallToastStyle(theme)}\n >\n <Stack horizontal verticalAlign=\"center\" tokens={{ childrenGap: personaSize ? '0.5rem' : '0rem' }}>\n <Stack\n horizontalAlign=\"start\"\n styles={styles?.avatarContainer ? styles.avatarContainer : incomingCallToastAvatarContainerStyle}\n >\n <Persona\n imageUrl={avatarImage}\n text={callerName}\n size={PersonaSize.size24}\n coinSize={personaSize}\n hidePersonaDetails={true}\n aria-label={callerName}\n />\n </Stack>\n\n <Stack grow horizontalAlign=\"center\" style={{ alignItems: 'flex-start', fontFamily: 'Segoe UI' }}>\n <Text\n tabIndex={0}\n aria-live={'assertive'}\n aria-label={alertText ?? /* @conditional-compile-remove(one-to-n-calling) */ formattedMessageString}\n >\n {alertText ??\n strings?.incomingCallNotificationPlaceholderAlert ??\n /* @conditional-compile-remove(one-to-n-calling) */ formattedMessageString}\n </Text>\n </Stack>\n <IconButton\n /* @conditional-compile-remove(one-to-n-calling) */\n ariaLabel={\n strings?.incomingCallNotificationDismissButtonAriaLabel ??\n localeStrings.incomingCallNotificationDismissButtonAriaLabel\n }\n iconProps={{ iconName: 'cancel' }}\n onClick={onDismiss}\n styles={dismissButtonStyle(theme)}\n />\n </Stack>\n\n <Stack horizontal horizontalAlign={'center'} tokens={{ childrenGap: '0.5rem' }}>\n <PrimaryButton\n styles={styles?.acceptButton ? styles.acceptButton : incomingCallAcceptButtonStyle(theme)}\n onClick={() => onAcceptWithAudio()}\n iconProps={{ iconName: 'IncomingCallNotificationAcceptIcon', style: { lineHeight: '1rem' } }}\n /* @conditional-compile-remove(one-to-n-calling) */\n ariaLabel={\n strings?.incomingCallNoticicationAcceptWithAudioAriaLabel ??\n localeStrings.incomingCallNoticicationAcceptWithAudioAriaLabel\n }\n /* @conditional-compile-remove(one-to-n-calling) */\n menuProps={acceptManuOptions}\n >\n {\n /* @conditional-compile-remove(one-to-n-calling) */ strings?.incomingCallNotificationAcceptButtonLabel ??\n localeStrings.incomingCallNotificationAcceptButtonLabel\n }\n </PrimaryButton>\n <DefaultButton\n styles={styles?.rejectButton ? styles.rejectButton : incomingCallRejectButtonStyle(theme)}\n onClick={() => onReject()}\n iconProps={{ iconName: 'IncomingCallNotificationRejectIcon' }}\n /* @conditional-compile-remove(one-to-n-calling) */\n ariaLabel={\n strings?.incomingCallNoticicationRejectAriaLabel ?? localeStrings.incomingCallNoticicationRejectAriaLabel\n }\n >\n {\n /* @conditional-compile-remove(one-to-n-calling) */ strings?.incomingCallNotificationRejectButtonLabel ??\n localeStrings.incomingCallNotificationRejectButtonLabel\n }\n </DefaultButton>\n </Stack>\n </Stack>\n );\n};\n\nconst incomingCallToastStyle = (theme: Theme): IStackStyles => {\n return {\n root: {\n width: '20rem',\n background: theme.palette.white,\n opacity: 0.95,\n borderRadius: '0.5rem',\n boxShadow: theme.effects.elevation8,\n padding: '1rem'\n }\n };\n};\n\nconst incomingCallToastAvatarContainerStyle: IStackStyles = {\n root: {\n marginRight: '0.5rem'\n }\n};\n\nconst dismissButtonStyle = (theme: Theme): IButtonStyles => {\n return {\n root: {\n color: theme.palette.neutralPrimary,\n width: '1rem',\n height: '1rem'\n },\n rootHovered: {\n color: theme.palette.neutralDark\n }\n };\n};\n\nconst incomingCallAcceptButtonStyle = (theme: Theme): IButtonStyles => {\n return {\n root: {\n color: theme.palette.white,\n border: 'none',\n borderRadius: theme.effects.roundedCorner4,\n width: '100%',\n maxWidth: '8.875rem'\n },\n rootHovered: {\n color: theme.palette.white\n },\n icon: {\n height: '1.25rem'\n }\n };\n};\n\nconst incomingCallRejectButtonStyle = (theme: Theme): IButtonStyles => {\n return {\n root: {\n borderRadius: theme.effects.roundedCorner4,\n maxWidth: '8.875rem',\n width: '100%'\n },\n icon: {\n height: '1.25rem'\n }\n };\n};\n"]}
|
@@ -57,6 +57,11 @@ export interface IncomingCallStackProps {
|
|
57
57
|
* Strings for the incoming call notifications.
|
58
58
|
*/
|
59
59
|
strings?: IncomingCallNotificationStrings;
|
60
|
+
/**
|
61
|
+
* Tab index for the incoming Call stack, this will set the tab order of the
|
62
|
+
* incoming call notifications in your application.
|
63
|
+
*/
|
64
|
+
tabIndex?: number;
|
60
65
|
}
|
61
66
|
/**
|
62
67
|
* Wrapper to manage multiple incoming calls
|
@@ -12,8 +12,9 @@ import React from 'react';
|
|
12
12
|
*/
|
13
13
|
export const IncomingCallStack = (props) => {
|
14
14
|
/* @conditional-compile-remove(one-to-n-calling) */
|
15
|
-
const { activeIncomingCalls, removedIncomingCalls, onAcceptCall, onRejectCall, styles, strings } = props;
|
16
|
-
return (React.createElement(Stack, { tokens: { childrenGap: '0.25rem' }
|
15
|
+
const { activeIncomingCalls, removedIncomingCalls, onAcceptCall, onRejectCall, styles, strings, tabIndex } = props;
|
16
|
+
return (React.createElement(Stack, { tokens: { childrenGap: '0.25rem' }, role: 'group',
|
17
|
+
/* @conditional-compile-remove(one-to-n-calling) */ tabIndex: tabIndex },
|
17
18
|
/* @conditional-compile-remove(one-to-n-calling) */ activeIncomingCalls
|
18
19
|
.filter((incomingCall) => !removedIncomingCalls.some((call) => call.id === incomingCall.id))
|
19
20
|
.map((incomingCall) => {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"IncomingCallStack.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/IncomingCallStack.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,mDAAmD;AACnD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;
|
1
|
+
{"version":3,"file":"IncomingCallStack.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/IncomingCallStack.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,mDAAmD;AACnD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAA6B,EAAe,EAAE;IAC9E,mDAAmD;IACnD,MAAM,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACnH,OAAO,CACL,oBAAC,KAAK,IACJ,MAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,EAClC,IAAI,EAAE,OAAO;QACb,mDAAmD,CAAC,QAAQ,EAAE,QAAQ;IAGpE,mDAAmD,CAAC,mBAAmB;SACpE,MAAM,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,YAAY,CAAC,EAAE,CAAC,CAAC;SAC3F,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE;QACpB,OAAO,CACL,oBAAC,wBAAwB,IACvB,GAAG,EAAE,YAAY,CAAC,EAAE,EACpB,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC,WAAW,EAC/C,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EACtD,iBAAiB,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,EAAE,IAAI,CAAC,EAC5D,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAC7C,SAAS,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC,EAC9C,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,EAAE,mBAAmB,EAAE,YAAY,CAAC,cAAc,EAAE,GACzC,CAC7B,CAAC;IACJ,CAAC,CAAC,CAEA,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(one-to-n-calling) */\nimport { IncomingCallNotification } from './IncomingCallNotification';\nimport { IncomingCallNotificationStyles, IncomingCallNotificationStrings } from './IncomingCallNotification';\nimport { Stack } from '@fluentui/react';\nimport React from 'react';\n\n/**\n * Represents an active incoming call.\n * @beta\n */\nexport interface IncomingCallStackCall {\n /**\n * Unique identifier for the incoming call.\n */\n id: string;\n /**\n * Information about the caller.\n */\n callerInfo: {\n /**\n * Display name of the caller.\n */\n displayName?: string;\n };\n /**\n * Whether or not the call is a voip capable call.\n */\n videoAvailable: boolean;\n}\n/**\n * Props for the IncomingCallManager component.\n * @beta\n */\nexport interface IncomingCallStackProps {\n /**\n * List of incoming calls.\n */\n activeIncomingCalls: IncomingCallStackCall[];\n /**\n * List of incoming calls that have ended.\n */\n removedIncomingCalls: IncomingCallStackCall[];\n /**\n * Handler to accept the incoming call.\n * @param incomingCallId - Id of the incoming call to accept.\n * @param useVideo - Whether to accept with video.\n * @returns void\n */\n onAcceptCall: (incomingCallId: string, useVideo?: boolean) => void;\n /**\n * Handler to reject the incoming call.\n * @param incomingCallId - id of the incoming call to reject\n * @returns - void\n */\n onRejectCall: (incomingCallId: string) => void;\n /**\n * Styles for the incoming call notifications.\n */\n styles?: IncomingCallNotificationStyles;\n /**\n * Strings for the incoming call notifications.\n */\n strings?: IncomingCallNotificationStrings;\n /**\n * Tab index for the incoming Call stack, this will set the tab order of the\n * incoming call notifications in your application.\n */\n tabIndex?: number;\n}\n\n/**\n * Wrapper to manage multiple incoming calls\n * @param props - {@link IncomingCallManagerProps}\n * @returns\n * @beta\n */\nexport const IncomingCallStack = (props: IncomingCallStackProps): JSX.Element => {\n /* @conditional-compile-remove(one-to-n-calling) */\n const { activeIncomingCalls, removedIncomingCalls, onAcceptCall, onRejectCall, styles, strings, tabIndex } = props;\n return (\n <Stack\n tokens={{ childrenGap: '0.25rem' }}\n role={'group'}\n /* @conditional-compile-remove(one-to-n-calling) */ tabIndex={tabIndex}\n >\n {\n /* @conditional-compile-remove(one-to-n-calling) */ activeIncomingCalls\n .filter((incomingCall) => !removedIncomingCalls.some((call) => call.id === incomingCall.id))\n .map((incomingCall) => {\n return (\n <IncomingCallNotification\n key={incomingCall.id}\n callerName={incomingCall.callerInfo.displayName}\n onAcceptWithAudio={() => onAcceptCall(incomingCall.id)}\n onAcceptWithVideo={() => onAcceptCall(incomingCall.id, true)}\n onReject={() => onRejectCall(incomingCall.id)}\n onDismiss={() => onRejectCall(incomingCall.id)}\n styles={styles}\n strings={strings}\n acceptOptions={{ showAcceptWithVideo: incomingCall.videoAvailable }}\n ></IncomingCallNotification>\n );\n })\n }\n </Stack>\n );\n};\n"]}
|
@@ -42,5 +42,6 @@ export declare const _LocalVideoTile: React.MemoExoticComponent<(props: {
|
|
42
42
|
drawerMenuHostId?: string;
|
43
43
|
strings?: VideoGalleryStrings;
|
44
44
|
reactionResources?: ReactionResources;
|
45
|
+
participantsCount?: number;
|
45
46
|
}) => React.JSX.Element>;
|
46
47
|
//# sourceMappingURL=LocalVideoTile.d.ts.map
|
@@ -1,6 +1,6 @@
|
|
1
1
|
// Copyright (c) Microsoft Corporation.
|
2
2
|
// Licensed under the MIT License.
|
3
|
-
import { mergeStyles, Stack } from '@fluentui/react';
|
3
|
+
import { mergeStyles, Stack, Spinner } from '@fluentui/react';
|
4
4
|
import { concatStyleSets, Layer } from '@fluentui/react';
|
5
5
|
import { _formatString } from "../../../acs-ui-common/src";
|
6
6
|
import React, { useMemo } from 'react';
|
@@ -14,6 +14,7 @@ import { MeetingReactionOverlay } from './MeetingReactionOverlay';
|
|
14
14
|
import { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';
|
15
15
|
import { _DrawerMenu } from './Drawer';
|
16
16
|
import { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';
|
17
|
+
import { videoContainerStyles, overlayStyles, overlayStylesTransparent, loadSpinnerStyles } from './styles/VideoTile.styles';
|
17
18
|
/**
|
18
19
|
* A memoized version of VideoTile for rendering local participant.
|
19
20
|
*
|
@@ -84,17 +85,29 @@ export const _LocalVideoTile = React.memo((props) => {
|
|
84
85
|
}
|
85
86
|
return (React.createElement(React.Fragment, null,
|
86
87
|
React.createElement(FloatingLocalCameraCycleButton, { showCameraSwitcherInLocalPreview: showCameraSwitcherInLocalPreview !== null && showCameraSwitcherInLocalPreview !== void 0 ? showCameraSwitcherInLocalPreview : false, localVideoCameraCycleButtonProps: localVideoCameraCycleButtonProps, localVideoCameraSwitcherLabel: localVideoCameraSwitcherLabel, localVideoSelectedDescription: localVideoSelectedDescription }),
|
87
|
-
React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true })
|
88
|
+
React.createElement(StreamMedia, { videoStreamElement: renderElement, isMirrored: true }),
|
89
|
+
props.participantsCount === 1 && (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, overlayStyles()) },
|
90
|
+
React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, ariaLive: "assertive", labelPosition: "bottom", styles: loadSpinnerStyles(theme, true) })))));
|
88
91
|
}, [
|
89
92
|
localVideoCameraCycleButtonProps,
|
90
93
|
localVideoCameraSwitcherLabel,
|
91
94
|
localVideoSelectedDescription,
|
92
95
|
renderElement,
|
93
|
-
showCameraSwitcherInLocalPreview
|
96
|
+
showCameraSwitcherInLocalPreview,
|
97
|
+
props.participantsCount,
|
98
|
+
strings === null || strings === void 0 ? void 0 : strings.waitingScreenText,
|
99
|
+
theme
|
94
100
|
]);
|
95
|
-
const
|
101
|
+
const videoTileOverlay = useMemo(() => {
|
102
|
+
const reactionOverlay = reactionResources !== undefined ? (React.createElement(MeetingReactionOverlay, { overlayMode: "grid-tiles", reaction: reaction, reactionResources: reactionResources })) : undefined;
|
103
|
+
return reactionOverlay;
|
104
|
+
}, [reaction, reactionResources]);
|
105
|
+
const onRenderAvatarOneParticipant = useCallback(() => {
|
106
|
+
return (React.createElement(Stack, { className: mergeStyles(videoContainerStyles, overlayStylesTransparent()) },
|
107
|
+
React.createElement(Spinner, { label: strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, ariaLive: "assertive", labelPosition: "bottom", styles: loadSpinnerStyles(theme, false) })));
|
108
|
+
}, [strings === null || strings === void 0 ? void 0 : strings.waitingScreenText, theme]);
|
96
109
|
return (React.createElement(Stack, { className: mergeStyles({ width: '100%', height: '100%' }), onKeyDown: menuKind === 'drawer' ? onKeyDown : undefined },
|
97
|
-
React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, alwaysShowLabelBackground: alwaysShowLabelBackground, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), overlay:
|
110
|
+
React.createElement(VideoTile, Object.assign({ key: userId !== null && userId !== void 0 ? userId : 'local-video-tile', userId: userId, renderElement: renderVideoStreamElement, showLabel: showLabel, alwaysShowLabelBackground: alwaysShowLabelBackground, displayName: displayName, initialsName: initialsName, styles: videoTileStyles, onRenderPlaceholder: props.participantsCount === 1 ? onRenderAvatarOneParticipant : onRenderAvatar, isMuted: isMuted, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, raisedHand: raisedHand, isSpotlighted: isSpotlighted }, videoTileContextualMenuProps, { onLongTouch: () => setDrawerMenuItemProps(convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))), overlay: videoTileOverlay }), drawerMenuItemProps.length > 0 && (React.createElement(Layer, { hostId: props.drawerMenuHostId },
|
98
111
|
React.createElement(Stack, { styles: drawerMenuWrapperStyles },
|
99
112
|
React.createElement(_DrawerMenu, { onLightDismiss: () => setDrawerMenuItemProps([]), items: drawerMenuItemProps })))))));
|
100
113
|
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { concatStyleSets, IContextualMenuProps, Layer } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport {\n useLocalVideoStreamLifecycleMaintainer,\n LocalVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\nimport { RaisedHand } from '../types';\nimport { useTheme } from '../theming';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo(\n (props: {\n userId?: string;\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n onDisposeLocalStreamView?: () => void;\n isAvailable?: boolean;\n isMuted?: boolean;\n renderElement?: HTMLElement;\n displayName?: string;\n initialsName?: string;\n localVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showLabel: boolean;\n alwaysShowLabelBackground?: boolean;\n showMuteIndicator?: boolean;\n showCameraSwitcherInLocalPreview?: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n styles?: VideoTileStylesProps;\n personaMinSize?: number;\n raisedHand?: RaisedHand;\n reaction?: Reaction;\n spotlightedParticipantUserIds?: string[];\n isSpotlighted?: boolean;\n onStartSpotlight?: () => void;\n onStopSpotlight?: () => void;\n maxParticipantsToSpotlight?: number;\n menuKind?: 'contextual' | 'drawer';\n drawerMenuHostId?: string;\n strings?: VideoGalleryStrings;\n reactionResources?: ReactionResources;\n }) => {\n const {\n isAvailable,\n isMuted,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n localVideoViewOptions,\n renderElement,\n userId,\n showLabel,\n alwaysShowLabelBackground,\n displayName,\n initialsName,\n onRenderAvatar,\n showMuteIndicator,\n styles,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n raisedHand,\n reaction,\n isSpotlighted,\n spotlightedParticipantUserIds,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n menuKind,\n strings,\n reactionResources\n } = props;\n\n const theme = useTheme();\n\n const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: localVideoViewOptions?.isMirrored,\n isStreamAvailable: isAvailable,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElementExists: !!renderElement,\n scalingMode: localVideoViewOptions?.scalingMode\n }),\n [\n isAvailable,\n localVideoViewOptions?.isMirrored,\n localVideoViewOptions?.scalingMode,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElement\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: { userId: userId ?? '' },\n strings: { ...strings },\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId: userId\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual' || !contextualMenuProps) {\n return {};\n }\n return {\n contextualMenu: contextualMenuProps\n };\n return {};\n }, [contextualMenuProps, menuKind]);\n\n const videoTileStyles = useMemo(() => {\n if (isSpotlighted) {\n return concatStyleSets(\n {\n root: {\n outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,\n outlineOffset: '-0.25rem'\n }\n },\n styles\n );\n }\n return styles;\n }, [isSpotlighted, theme.palette.neutralTertiaryAlt, styles]);\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement || !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <>\n <FloatingLocalCameraCycleButton\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={localVideoSelectedDescription}\n />\n <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n </>\n );\n }, [\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n renderElement,\n showCameraSwitcherInLocalPreview\n ]);\n\n const reactionOverlay =\n reactionResources !== undefined ? (\n <MeetingReactionOverlay overlayMode=\"grid-tiles\" reaction={reaction} reactionResources={reactionResources} />\n ) : undefined;\n\n return (\n <Stack\n className={mergeStyles({ width: '100%', height: '100%' })}\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n >\n <VideoTile\n key={userId ?? 'local-video-tile'}\n userId={userId}\n renderElement={renderVideoStreamElement}\n showLabel={showLabel}\n alwaysShowLabelBackground={alwaysShowLabelBackground}\n displayName={displayName}\n initialsName={initialsName}\n styles={videoTileStyles}\n onRenderPlaceholder={onRenderAvatar}\n isMuted={isMuted}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n raisedHand={raisedHand}\n isSpotlighted={isSpotlighted}\n {...videoTileContextualMenuProps}\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n overlay={reactionOverlay}\n >\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} />\n </Stack>\n </Layer>\n )}\n </VideoTile>\n </Stack>\n );\n }\n);\n\nconst FloatingLocalCameraCycleButton = (props: {\n showCameraSwitcherInLocalPreview: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n}): JSX.Element => {\n const {\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription\n } = props;\n const ariaDescription =\n localVideoCameraCycleButtonProps?.selectedCamera &&\n localVideoSelectedDescription &&\n _formatString(localVideoSelectedDescription, {\n cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n });\n return (\n <Stack horizontalAlign=\"end\">\n {showCameraSwitcherInLocalPreview &&\n localVideoCameraCycleButtonProps?.cameras !== undefined &&\n localVideoCameraCycleButtonProps?.selectedCamera !== undefined &&\n localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && (\n <LocalVideoCameraCycleButton\n cameras={localVideoCameraCycleButtonProps.cameras}\n selectedCamera={localVideoCameraCycleButtonProps.selectedCamera}\n onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera}\n label={localVideoCameraSwitcherLabel}\n ariaDescription={ariaDescription}\n />\n )}\n </Stack>\n );\n};\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}
|
1
|
+
{"version":3,"file":"LocalVideoTile.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/LocalVideoTile.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Spinner } from '@fluentui/react';\nimport { concatStyleSets, IContextualMenuProps, Layer } from '@fluentui/react';\nimport { _formatString } from '@internal/acs-ui-common';\nimport React, { useMemo } from 'react';\nimport { KeyboardEvent, useCallback } from 'react';\nimport { OnRenderAvatarCallback, VideoStreamOptions, CreateVideoStreamViewResult } from '../types';\nimport { Reaction } from '../types';\nimport { LocalVideoCameraCycleButton, LocalVideoCameraCycleButtonProps } from './LocalVideoCameraButton';\nimport { StreamMedia } from './StreamMedia';\nimport {\n useLocalVideoStreamLifecycleMaintainer,\n LocalVideoStreamLifecycleMaintainerProps\n} from './VideoGallery/useVideoStreamLifecycleMaintainer';\nimport { VideoTile, VideoTileStylesProps } from './VideoTile';\nimport { RaisedHand } from '../types';\nimport { useTheme } from '../theming';\nimport { ReactionResources } from '../types/ReactionTypes';\nimport { MeetingReactionOverlay } from './MeetingReactionOverlay';\nimport { useVideoTileContextualMenuProps } from './VideoGallery/useVideoTileContextualMenuProps';\nimport { VideoGalleryStrings } from './VideoGallery';\nimport { _DrawerMenu, _DrawerMenuItemProps } from './Drawer';\nimport { drawerMenuWrapperStyles } from './VideoGallery/styles/RemoteVideoTile.styles';\nimport {\n videoContainerStyles,\n overlayStyles,\n overlayStylesTransparent,\n loadSpinnerStyles\n} from './styles/VideoTile.styles';\n\n/**\n * A memoized version of VideoTile for rendering local participant.\n *\n * @internal\n */\nexport const _LocalVideoTile = React.memo(\n (props: {\n userId?: string;\n onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n onDisposeLocalStreamView?: () => void;\n isAvailable?: boolean;\n isMuted?: boolean;\n renderElement?: HTMLElement;\n displayName?: string;\n initialsName?: string;\n localVideoViewOptions?: VideoStreamOptions;\n onRenderAvatar?: OnRenderAvatarCallback;\n showLabel: boolean;\n alwaysShowLabelBackground?: boolean;\n showMuteIndicator?: boolean;\n showCameraSwitcherInLocalPreview?: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n styles?: VideoTileStylesProps;\n personaMinSize?: number;\n raisedHand?: RaisedHand;\n reaction?: Reaction;\n spotlightedParticipantUserIds?: string[];\n isSpotlighted?: boolean;\n onStartSpotlight?: () => void;\n onStopSpotlight?: () => void;\n maxParticipantsToSpotlight?: number;\n menuKind?: 'contextual' | 'drawer';\n drawerMenuHostId?: string;\n strings?: VideoGalleryStrings;\n reactionResources?: ReactionResources;\n participantsCount?: number;\n }) => {\n const {\n isAvailable,\n isMuted,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n localVideoViewOptions,\n renderElement,\n userId,\n showLabel,\n alwaysShowLabelBackground,\n displayName,\n initialsName,\n onRenderAvatar,\n showMuteIndicator,\n styles,\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n raisedHand,\n reaction,\n isSpotlighted,\n spotlightedParticipantUserIds,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n menuKind,\n strings,\n reactionResources\n } = props;\n\n const theme = useTheme();\n\n const localVideoStreamProps: LocalVideoStreamLifecycleMaintainerProps = useMemo(\n () => ({\n isMirrored: localVideoViewOptions?.isMirrored,\n isStreamAvailable: isAvailable,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElementExists: !!renderElement,\n scalingMode: localVideoViewOptions?.scalingMode\n }),\n [\n isAvailable,\n localVideoViewOptions?.isMirrored,\n localVideoViewOptions?.scalingMode,\n onCreateLocalStreamView,\n onDisposeLocalStreamView,\n renderElement\n ]\n );\n\n // Handle creating, destroying and updating the video stream as necessary\n useLocalVideoStreamLifecycleMaintainer(localVideoStreamProps);\n\n const contextualMenuProps = useVideoTileContextualMenuProps({\n participant: { userId: userId ?? '' },\n strings: { ...strings },\n spotlightedParticipantUserIds,\n isSpotlighted,\n onStartSpotlight,\n onStopSpotlight,\n maxParticipantsToSpotlight,\n myUserId: userId\n });\n\n const videoTileContextualMenuProps = useMemo(() => {\n if (menuKind !== 'contextual' || !contextualMenuProps) {\n return {};\n }\n return {\n contextualMenu: contextualMenuProps\n };\n return {};\n }, [contextualMenuProps, menuKind]);\n\n const videoTileStyles = useMemo(() => {\n if (isSpotlighted) {\n return concatStyleSets(\n {\n root: {\n outline: `0.25rem solid ${theme.palette.neutralTertiaryAlt}`,\n outlineOffset: '-0.25rem'\n }\n },\n styles\n );\n }\n return styles;\n }, [isSpotlighted, theme.palette.neutralTertiaryAlt, styles]);\n\n const [drawerMenuItemProps, setDrawerMenuItemProps] = React.useState<_DrawerMenuItemProps[]>([]);\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent) => {\n if (e.key === 'Enter') {\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n );\n }\n },\n [setDrawerMenuItemProps, contextualMenuProps]\n );\n\n const renderVideoStreamElement = useMemo(() => {\n // Checking if renderElement is well defined or not as calling SDK has a number of video streams limitation which\n // implies that, after their threshold, all streams have no child (blank video)\n if (!renderElement || !renderElement.childElementCount) {\n // Returning `undefined` results in the placeholder with avatar being shown\n return undefined;\n }\n\n return (\n <>\n <FloatingLocalCameraCycleButton\n showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview ?? false}\n localVideoCameraCycleButtonProps={localVideoCameraCycleButtonProps}\n localVideoCameraSwitcherLabel={localVideoCameraSwitcherLabel}\n localVideoSelectedDescription={localVideoSelectedDescription}\n />\n <StreamMedia videoStreamElement={renderElement} isMirrored={true} />\n {props.participantsCount === 1 && (\n <Stack className={mergeStyles(videoContainerStyles, overlayStyles())}>\n <Spinner\n label={strings?.waitingScreenText}\n ariaLive=\"assertive\"\n labelPosition=\"bottom\"\n styles={loadSpinnerStyles(theme, true)}\n />\n </Stack>\n )}\n </>\n );\n }, [\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription,\n renderElement,\n showCameraSwitcherInLocalPreview,\n props.participantsCount,\n strings?.waitingScreenText,\n theme\n ]);\n\n const videoTileOverlay = useMemo(() => {\n const reactionOverlay =\n reactionResources !== undefined ? (\n <MeetingReactionOverlay overlayMode=\"grid-tiles\" reaction={reaction} reactionResources={reactionResources} />\n ) : undefined;\n return reactionOverlay;\n }, [reaction, reactionResources]);\n\n const onRenderAvatarOneParticipant = useCallback(() => {\n return (\n <Stack className={mergeStyles(videoContainerStyles, overlayStylesTransparent())}>\n <Spinner\n label={strings?.waitingScreenText}\n ariaLive=\"assertive\"\n labelPosition=\"bottom\"\n styles={loadSpinnerStyles(theme, false)}\n />\n </Stack>\n );\n }, [strings?.waitingScreenText, theme]);\n\n return (\n <Stack\n className={mergeStyles({ width: '100%', height: '100%' })}\n onKeyDown={menuKind === 'drawer' ? onKeyDown : undefined}\n >\n <VideoTile\n key={userId ?? 'local-video-tile'}\n userId={userId}\n renderElement={renderVideoStreamElement}\n showLabel={showLabel}\n alwaysShowLabelBackground={alwaysShowLabelBackground}\n displayName={displayName}\n initialsName={initialsName}\n styles={videoTileStyles}\n onRenderPlaceholder={props.participantsCount === 1 ? onRenderAvatarOneParticipant : onRenderAvatar}\n isMuted={isMuted}\n showMuteIndicator={showMuteIndicator}\n personaMinSize={props.personaMinSize}\n raisedHand={raisedHand}\n isSpotlighted={isSpotlighted}\n {...videoTileContextualMenuProps}\n onLongTouch={() =>\n setDrawerMenuItemProps(\n convertContextualMenuItemsToDrawerMenuItemProps(contextualMenuProps, () => setDrawerMenuItemProps([]))\n )\n }\n overlay={videoTileOverlay}\n >\n {drawerMenuItemProps.length > 0 && (\n <Layer hostId={props.drawerMenuHostId}>\n <Stack styles={drawerMenuWrapperStyles}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItemProps([])} items={drawerMenuItemProps} />\n </Stack>\n </Layer>\n )}\n </VideoTile>\n </Stack>\n );\n }\n);\n\nconst FloatingLocalCameraCycleButton = (props: {\n showCameraSwitcherInLocalPreview: boolean;\n localVideoCameraCycleButtonProps?: LocalVideoCameraCycleButtonProps;\n localVideoCameraSwitcherLabel?: string;\n localVideoSelectedDescription?: string;\n}): JSX.Element => {\n const {\n showCameraSwitcherInLocalPreview,\n localVideoCameraCycleButtonProps,\n localVideoCameraSwitcherLabel,\n localVideoSelectedDescription\n } = props;\n const ariaDescription =\n localVideoCameraCycleButtonProps?.selectedCamera &&\n localVideoSelectedDescription &&\n _formatString(localVideoSelectedDescription, {\n cameraName: localVideoCameraCycleButtonProps.selectedCamera.name\n });\n return (\n <Stack horizontalAlign=\"end\">\n {showCameraSwitcherInLocalPreview &&\n localVideoCameraCycleButtonProps?.cameras !== undefined &&\n localVideoCameraCycleButtonProps?.selectedCamera !== undefined &&\n localVideoCameraCycleButtonProps?.onSelectCamera !== undefined && (\n <LocalVideoCameraCycleButton\n cameras={localVideoCameraCycleButtonProps.cameras}\n selectedCamera={localVideoCameraCycleButtonProps.selectedCamera}\n onSelectCamera={localVideoCameraCycleButtonProps.onSelectCamera}\n label={localVideoCameraSwitcherLabel}\n ariaDescription={ariaDescription}\n />\n )}\n </Stack>\n );\n};\n\nconst convertContextualMenuItemsToDrawerMenuItemProps = (\n contextualMenuProps?: IContextualMenuProps,\n onLightDismiss?: () => void\n): _DrawerMenuItemProps[] => {\n if (!contextualMenuProps) {\n return [];\n }\n return contextualMenuProps.items.map((item) => {\n return {\n itemKey: item.key,\n text: item.text,\n iconProps: item.iconProps,\n disabled: item.disabled,\n onItemClick: () => {\n item.onClick?.();\n onLightDismiss?.();\n }\n };\n });\n};\n"]}
|
@@ -67,6 +67,26 @@ export interface MicrophoneButtonStrings {
|
|
67
67
|
* Title for primary action section of split button
|
68
68
|
*/
|
69
69
|
microphonePrimaryActionSplitButtonTitle?: string;
|
70
|
+
/**
|
71
|
+
* Aria description for the microphone button
|
72
|
+
*/
|
73
|
+
microphoneAriaDescription?: string;
|
74
|
+
/**
|
75
|
+
* Title when deep noise suppression is on
|
76
|
+
*/
|
77
|
+
deepNoiseSuppresionOnTitle?: string;
|
78
|
+
/**
|
79
|
+
* Title when deep noise suppression is off
|
80
|
+
*/
|
81
|
+
deepNoiseSuppresionOffTitle?: string;
|
82
|
+
/**
|
83
|
+
* Noise Suppression turned on string for announcer
|
84
|
+
*/
|
85
|
+
deepNoiseSuppresionOnAnnouncement?: string;
|
86
|
+
/**
|
87
|
+
* Noise Suppression turned off string for announcer
|
88
|
+
*/
|
89
|
+
deepNoiseSuppresionOffAnnouncement?: string;
|
70
90
|
}
|
71
91
|
/**
|
72
92
|
* Styles for {@link MicrophoneButton}
|
@@ -139,6 +159,14 @@ export interface MicrophoneButtonProps extends ControlBarButtonProps {
|
|
139
159
|
* Styles for {@link MicrophoneButton} and the device selection flyout.
|
140
160
|
*/
|
141
161
|
styles?: Partial<MicrophoneButtonStyles>;
|
162
|
+
/**
|
163
|
+
* Whether the deep noise suppression is on or off
|
164
|
+
*/
|
165
|
+
isDeepNoiseSuppressionOn?: boolean;
|
166
|
+
/**
|
167
|
+
* Callback when noise suppression is clicked
|
168
|
+
*/
|
169
|
+
onClickNoiseSuppression?: () => void;
|
142
170
|
}
|
143
171
|
/**
|
144
172
|
* A button to turn microphone on / off.
|
@@ -14,6 +14,8 @@ import { useLocale } from '../localization';
|
|
14
14
|
import { ControlBarButton } from './ControlBarButton';
|
15
15
|
import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
|
16
16
|
import { ContextualMenuItemType } from '@fluentui/react';
|
17
|
+
/* @conditional-compile-remove(DNS) */
|
18
|
+
import { Toggle, Stack } from '@fluentui/react';
|
17
19
|
import { generateDefaultDeviceMenuProps } from './DevicesButton';
|
18
20
|
import { Announcer } from './Announcer';
|
19
21
|
/**
|
@@ -60,6 +62,16 @@ export const MicrophoneButton = (props) => {
|
|
60
62
|
}
|
61
63
|
}
|
62
64
|
}), [isMicOn, onToggleMicrophone, toggleAnnouncerString]);
|
65
|
+
/* @conditional-compile-remove(DNS) */
|
66
|
+
const deepNoiseSuppressionToggleStyles = {
|
67
|
+
root: {
|
68
|
+
margin: '4px',
|
69
|
+
padding: '0px 12px',
|
70
|
+
flexFlow: 'row-reverse',
|
71
|
+
justifyContent: 'space-between'
|
72
|
+
},
|
73
|
+
label: { fontWeight: 400 }
|
74
|
+
};
|
63
75
|
/**
|
64
76
|
* We need to also include the primary action of the button to the
|
65
77
|
* split button for mobile devices.
|
@@ -83,6 +95,22 @@ export const MicrophoneButton = (props) => {
|
|
83
95
|
iconName: props.checked ? 'SplitButtonPrimaryActionMicUnmuted' : 'SplitButtonPrimaryActionMicMuted',
|
84
96
|
styles: { root: { lineHeight: 0 } }
|
85
97
|
}
|
98
|
+
},
|
99
|
+
/* @conditional-compile-remove(DNS) */
|
100
|
+
{
|
101
|
+
key: 'microphoneDNSToggle',
|
102
|
+
onRender: () => {
|
103
|
+
return (React.createElement(Stack, { onClick: () => __awaiter(void 0, void 0, void 0, function* () {
|
104
|
+
var _a;
|
105
|
+
yield ((_a = props.onClickNoiseSuppression) === null || _a === void 0 ? void 0 : _a.call(props));
|
106
|
+
setAnnouncerString(props.isDeepNoiseSuppressionOn
|
107
|
+
? strings.deepNoiseSuppresionOnAnnouncement
|
108
|
+
: strings.deepNoiseSuppresionOffAnnouncement);
|
109
|
+
}) },
|
110
|
+
React.createElement(Toggle, { label: props.isDeepNoiseSuppressionOn
|
111
|
+
? strings.deepNoiseSuppresionOnTitle
|
112
|
+
: strings.deepNoiseSuppresionOffTitle, checked: props.isDeepNoiseSuppressionOn, inlineLabel: true, styles: deepNoiseSuppressionToggleStyles })));
|
113
|
+
}
|
86
114
|
}
|
87
115
|
]
|
88
116
|
}
|
@@ -91,6 +119,6 @@ export const MicrophoneButton = (props) => {
|
|
91
119
|
React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
|
92
120
|
React.createElement(ControlBarButton, Object.assign({}, props, { onClick: props.onToggleMicrophone ? onToggleClick : props.onClick, onRenderOnIcon: (_f = props.onRenderOnIcon) !== null && _f !== void 0 ? _f : onRenderMicOnIcon, onRenderOffIcon: (_g = props.onRenderOffIcon) !== null && _g !== void 0 ? _g : onRenderMicOffIcon, strings: strings, labelKey: (_h = props.labelKey) !== null && _h !== void 0 ? _h : 'microphoneButtonLabel', menuProps: (_j = props.menuProps) !== null && _j !== void 0 ? _j : (props.enableDeviceSelectionMenu
|
93
121
|
? generateDefaultDeviceMenuProps(Object.assign(Object.assign({}, props), { styles: (_k = props.styles) === null || _k === void 0 ? void 0 : _k.menuStyles }), strings, splitButtonPrimaryAction)
|
94
|
-
: undefined), menuIconProps: ((_l = props.menuIconProps) !== null && _l !== void 0 ? _l : !props.enableDeviceSelectionMenu) ? { hidden: true } : undefined, split: (_m = props.split) !== null && _m !== void 0 ? _m : props.enableDeviceSelectionMenu, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.microphoneButtonSplitRoleDescription : undefined, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined, disabled: disabled, primaryDisabled: primaryDisabled }))));
|
122
|
+
: undefined), menuIconProps: ((_l = props.menuIconProps) !== null && _l !== void 0 ? _l : !props.enableDeviceSelectionMenu) ? { hidden: true } : undefined, split: (_m = props.split) !== null && _m !== void 0 ? _m : props.enableDeviceSelectionMenu, "aria-roledescription": props.enableDeviceSelectionMenu ? strings.microphoneButtonSplitRoleDescription : undefined, "aria-description": strings.microphoneAriaDescription, splitButtonAriaLabel: props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined, disabled: disabled, primaryDisabled: primaryDisabled }))));
|
95
123
|
};
|
96
124
|
//# sourceMappingURL=MicrophoneButton.js.map
|