@azure/communication-react 1.9.0-alpha-202310280012 → 1.9.0-alpha-202311010014

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/communication-react.d.ts +72 -0
  2. package/dist/dist-cjs/communication-react/index.js +142 -43
  3. package/dist/dist-cjs/communication-react/index.js.map +1 -1
  4. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
  5. package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
  6. package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.d.ts +35 -0
  7. package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js +10 -6
  8. package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js.map +1 -1
  9. package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.d.ts +4 -0
  10. package/dist/dist-esm/react-composites/src/composites/CallComposite/Strings.js.map +1 -1
  11. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.d.ts +1 -0
  12. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js +9 -1
  13. package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js.map +1 -1
  14. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.d.ts +1 -0
  15. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js +2 -2
  16. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js.map +1 -1
  17. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.d.ts +8 -0
  18. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js +23 -5
  19. package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js.map +1 -1
  20. package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.d.ts +7 -9
  21. package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.js +32 -16
  22. package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.js.map +1 -1
  23. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.d.ts +34 -0
  24. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js +16 -4
  25. package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js.map +1 -1
  26. package/dist/dist-esm/react-composites/src/composites/common/ModalLocalAndRemotePIP.d.ts +11 -0
  27. package/dist/dist-esm/react-composites/src/composites/common/ModalLocalAndRemotePIP.js +39 -9
  28. package/dist/dist-esm/react-composites/src/composites/common/ModalLocalAndRemotePIP.js.map +1 -1
  29. package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js +1 -1
  30. package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js.map +1 -1
  31. package/dist/dist-esm/react-composites/src/composites/common/styles/ModalLocalAndRemotePIP.styles.js +14 -2
  32. package/dist/dist-esm/react-composites/src/composites/common/styles/ModalLocalAndRemotePIP.styles.js.map +1 -1
  33. package/dist/dist-esm/react-composites/src/composites/localization/locales/en-US/strings.json +1 -0
  34. package/package.json +1 -1
package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CallConfiguration.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n IStackItemStyles,\n IStackStyles,\n IStackTokens,\n IStyle,\n mergeStyles,\n IButtonStyles,\n Theme,\n IPanelStyles,\n IFocusTrapZoneProps\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const configurationStackTokensDesktop: IStackTokens = {\n childrenGap: '1rem'\n};\n\n/**\n * @private\n */\nexport const configurationStackTokensMobile: IStackTokens = {\n childrenGap: '1.5rem'\n};\n\nconst configurationContainerStyle: IStyle = {\n height: '100%',\n width: '100%',\n padding: '2rem 1rem 2rem 1rem'\n};\n\n/**\n * @private\n */\nexport const configurationContainerStyleDesktop = mergeStyles({\n ...configurationContainerStyle,\n minWidth: '25rem', // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2\n minHeight: '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2\n});\n\n/**\n * @private\n */\nexport const configurationContainerStyleMobile = mergeStyles({\n ...configurationContainerStyle,\n minWidth: '16rem', // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2\n minHeight: '13rem'\n});\n\n/**\n * @private\n */\nexport const selectionContainerStyle = mergeStyles({\n width: '100%',\n minWidth: '11rem',\n maxWidth: '18.75rem',\n padding: '0.5rem'\n});\n\n/**\n * @private\n */\nexport const titleContainerStyleDesktop = mergeStyles({\n fontSize: '1.25rem',\n lineHeight: '1.75rem',\n fontWeight: 600\n});\n\n/**\n * @private\n */\nexport const titleContainerStyleMobile = mergeStyles({\n fontSize: '1.0625rem',\n lineHeight: '1.375rem',\n fontWeight: 600,\n textAlign: 'center'\n});\n\n/**\n * @private\n */\nexport const callDetailsContainerStyles: IStackStyles = {\n root: {\n textAlign: 'center',\n maxWidth: _pxToRem(700),\n alignSelf: 'center'\n }\n};\n\nconst callDetailsStyle: IStyle = {\n fontSize: '0.9375',\n lineHeight: '1.25rem',\n marginTop: '0.25rem'\n};\n\n/**\n * @private\n */\nexport const callDetailsStyleDesktop = mergeStyles({\n ...callDetailsStyle\n});\n\n/**\n * @private\n */\nexport const callDetailsStyleMobile = mergeStyles({\n ...callDetailsStyle,\n textAlign: 'center'\n});\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleDesktop: IStackStyles = {\n root: {\n paddingTop: '1.125rem'\n }\n};\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleMobile: IStackStyles = {\n root: {\n textAlign: 'center'\n }\n};\n\n/**\n * @private\n */\nexport const startCallButtonStyleMobile = mergeStyles({\n width: '100%',\n maxWidth: 'unset',\n borderRadius: '0.25rem'\n});\n\n/**\n * @private\n */\nexport const startCallButtonStyleDesktop = mergeStyles({\n borderRadius: '0.25rem'\n});\n\n/** @private */\nexport const cameraAndVideoEffectsContainerStyleDesktop: IStackItemStyles = {\n root: {\n alignItems: 'center'\n }\n};\n\n/**\n * @private\n */\nexport const effectsButtonStyles = (theme: Theme): IButtonStyles => {\n return {\n root: {\n background: 'transparent',\n border: 'none',\n color: theme.palette.themePrimary,\n // Top and bottom padding needs to be 5px to match the label padding\n padding: '5px 0.25rem',\n ':hover, :focus': {\n color: theme.palette.themePrimary\n },\n svg: {\n height: '1rem',\n width: '1rem'\n }\n },\n rootChecked: {\n color: theme.palette.themePrimary\n },\n rootHovered: {\n color: theme.palette.themePrimary\n },\n rootPressed: {\n color: theme.palette.themePrimary\n },\n rootFocused: {\n color: theme.palette.themePrimary\n }\n };\n};\n\n/** @private */\nexport const fillWidth = mergeStyles({\n width: '100%'\n});\n\n/** @private */\nexport const panelStyles: Partial<IPanelStyles> = {\n content: {\n display: 'flex',\n flexBasis: '100%',\n paddingLeft: '0rem', // remove default padding\n paddingRight: '0rem' // remove default padding\n },\n commands: {\n paddingTop: '0rem' // remove default padding\n },\n scrollableContent: {\n display: 'flex',\n flexDirection: 'column',\n height: '100%'\n }\n};\n\n/** @private */\nexport const panelFocusProps: IFocusTrapZoneProps = {\n forceFocusInsideTrap: false\n};\n\"../../../../../acs-ui-common/src\""]}
1
+ {"version":3,"file":"CallConfiguration.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n IStackItemStyles,\n IStackStyles,\n IStackTokens,\n IStyle,\n mergeStyles,\n IButtonStyles,\n Theme,\n IPanelStyles,\n IFocusTrapZoneProps,\n IImageStyles,\n AnimationStyles\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport const configurationStackTokensDesktop: IStackTokens = {\n childrenGap: '1rem'\n};\n\n/**\n * @private\n */\nexport const configurationStackTokensMobile: IStackTokens = {\n childrenGap: '1.5rem'\n};\n\n/** @private */\nexport const configurationContainerStyle = (desktop: boolean, backgroundImageUrl?: string): IStackStyles => ({\n root: {\n height: '100%',\n width: '100%',\n padding: '2rem 1rem 2rem 1rem',\n minWidth: desktop\n ? '25rem' // sum of min-width from children + ChildrenGap * (nb of children - 1) + padding * 2 = (11 + 11) + (2 * 1) + 0.5 * 2\n : '16rem', // from LocalPreview: ControlBar width + 0.5 * 2 for spacing + padding * 2 = 14 + 0.5 * 2 + 0.5 * 2\n minHeight: desktop\n ? '22rem' // max height of SelectionContainer + padding * 2 = 21 + 0.5 * 2\n : '13rem',\n '::before': !backgroundImageUrl\n ? undefined\n : {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n zIndex: 0,\n width: '100%',\n height: '100%',\n backgroundImage: `url(${backgroundImageUrl})`,\n backgroundSize: 'cover',\n backgroundPosition: 'center',\n ...AnimationStyles.fadeIn500\n }\n }\n});\n\n/**\n * @private\n */\nexport const selectionContainerStyle = mergeStyles({\n width: '100%',\n minWidth: '11rem',\n maxWidth: '18.75rem',\n padding: '0.5rem'\n});\n\n/**\n * @private\n */\nexport const titleContainerStyleDesktop = mergeStyles({\n fontSize: '1.25rem',\n lineHeight: '1.75rem',\n fontWeight: 600\n});\n\n/**\n * @private\n */\nexport const titleContainerStyleMobile = mergeStyles({\n fontSize: '1.0625rem',\n lineHeight: '1.375rem',\n fontWeight: 600,\n textAlign: 'center'\n});\n\n/**\n * @private\n */\nexport const callDetailsContainerStyles: IStackStyles = {\n root: {\n textAlign: 'center',\n maxWidth: _pxToRem(700),\n alignSelf: 'center'\n }\n};\n\nconst callDetailsStyle: IStyle = {\n fontSize: '0.9375',\n lineHeight: '1.25rem',\n marginTop: '0.25rem'\n};\n\n/**\n * @private\n */\nexport const callDetailsStyleDesktop = mergeStyles({\n ...callDetailsStyle\n});\n\n/**\n * @private\n */\nexport const callDetailsStyleMobile = mergeStyles({\n ...callDetailsStyle,\n textAlign: 'center'\n});\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleDesktop: IStackStyles = {\n root: {\n paddingTop: '1.125rem'\n }\n};\n\n/**\n * @private\n */\nexport const startCallButtonContainerStyleMobile: IStackStyles = {\n root: {\n textAlign: 'center'\n }\n};\n\n/**\n * @private\n */\nexport const startCallButtonStyleMobile = mergeStyles({\n width: '100%',\n maxWidth: 'unset',\n borderRadius: '0.25rem'\n});\n\n/**\n * @private\n */\nexport const startCallButtonStyleDesktop = mergeStyles({\n borderRadius: '0.25rem'\n});\n\n/** @private */\nexport const cameraAndVideoEffectsContainerStyleDesktop: IStackItemStyles = {\n root: {\n alignItems: 'center'\n }\n};\n\n/**\n * @private\n */\nexport const effectsButtonStyles = (theme: Theme): IButtonStyles => {\n return {\n root: {\n background: 'transparent',\n border: 'none',\n color: theme.palette.themePrimary,\n // Top and bottom padding needs to be 5px to match the label padding\n padding: '5px 0.25rem',\n ':hover, :focus': {\n color: theme.palette.themePrimary\n },\n svg: {\n height: '1rem',\n width: '1rem'\n }\n },\n rootChecked: {\n color: theme.palette.themePrimary\n },\n rootHovered: {\n color: theme.palette.themePrimary\n },\n rootPressed: {\n color: theme.palette.themePrimary\n },\n rootFocused: {\n color: theme.palette.themePrimary\n }\n };\n};\n\n/** @private */\nexport const fillWidth = mergeStyles({\n width: '100%',\n position: 'relative'\n});\n\n/** @private */\nexport const panelStyles: Partial<IPanelStyles> = {\n content: {\n display: 'flex',\n flexBasis: '100%',\n paddingLeft: '0rem', // remove default padding\n paddingRight: '0rem' // remove default padding\n },\n commands: {\n paddingTop: '0rem' // remove default padding\n },\n scrollableContent: {\n display: 'flex',\n flexDirection: 'column',\n height: '100%'\n }\n};\n\n/** @private */\nexport const panelFocusProps: IFocusTrapZoneProps = {\n forceFocusInsideTrap: false\n};\n\n/**\n * @private\n */\nexport const logoStyles = (shape: 'circle' | 'square'): IImageStyles => ({\n root: {\n overflow: 'initial', // prevent the image being clipped\n display: 'flex',\n justifyContent: 'center',\n marginBottom: '1rem'\n },\n image: { borderRadius: shape === 'circle' ? '100%' : undefined, height: '3rem', width: '3rem' }\n});\n\"../../../../../acs-ui-common/src\""]}
package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.d.ts CHANGED
@@ -137,6 +137,40 @@ export declare type CallWithChatCompositeOptions = {
137
137
  */
138
138
  layout?: VideoGalleryLayout;
139
139
  };
140
+ /**
141
+ * Logo displayed on the configuration page.
142
+ */
143
+ logo?: {
144
+ /**
145
+ * URL for the logo image.
146
+ *
147
+ * @remarks
148
+ * Recommended size is 80x80 pixels.
149
+ */
150
+ url: string;
151
+ /**
152
+ * Alt text for the logo image.
153
+ */
154
+ alt?: string;
155
+ /**
156
+ * The logo can be displayed as a circle or a square.
157
+ *
158
+ * @defaultValue 'circle'
159
+ */
160
+ shape?: 'circle' | 'square';
161
+ };
162
+ /**
163
+ * Background image displayed on the configuration page.
164
+ */
165
+ backgroundImage?: {
166
+ /**
167
+ * URL for the background image.
168
+ *
169
+ * @remarks
170
+ * Background image should be larger than 576x567 pixels and smaller than 2048x2048 pixels pixels.
171
+ */
172
+ url: string;
173
+ };
140
174
  };
141
175
  /**
142
176
  * CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.
package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js CHANGED
@@ -137,7 +137,11 @@ const CallWithChatScreen = (props) => {
137
137
  /* @conditional-compile-remove(gallery-layouts) */
138
138
  galleryOptions: props.galleryOptions,
139
139
  /* @conditional-compile-remove(click-to-call) */
140
- localVideoTile: props.localVideoTile
140
+ localVideoTile: props.localVideoTile,
141
+ /* @conditional-compile-remove(custom-branding) */
142
+ logo: props.logo,
143
+ /* @conditional-compile-remove(custom-branding) */
144
+ backgroundImage: props.backgroundImage
141
145
  }), [
142
146
  props.callControls,
143
147
  callControlOptionsFromProps,
@@ -157,7 +161,11 @@ const CallWithChatScreen = (props) => {
157
161
  /* @conditional-compile-remove(click-to-call) */
158
162
  props.localVideoTile,
159
163
  /* @conditional-compile-remove(pinned-participants) */
160
- props.remoteVideoTileMenuOptions
164
+ props.remoteVideoTileMenuOptions,
165
+ /* @conditional-compile-remove(custom-branding) */
166
+ props.logo,
167
+ /* @conditional-compile-remove(custom-branding) */
168
+ props.backgroundImage
161
169
  ]);
162
170
  const onRenderChatContent = useCallback(() => (React.createElement(ChatComposite, Object.assign({}, chatProps, { fluentTheme: theme, options: {
163
171
  topic: false,
@@ -196,7 +204,7 @@ const CallWithChatScreen = (props) => {
196
204
  React.createElement(Stack, { verticalFill: true, grow: true, styles: compositeOuterContainerStyles, id: compositeParentDivId },
197
205
  React.createElement(Stack, { horizontal: true, grow: true },
198
206
  React.createElement(Stack.Item, { grow: true, styles: callCompositeContainerStyles(mobileView) },
199
- React.createElement(CallCompositeInner, Object.assign({}, props, { formFactor: formFactor, options: callCompositeOptions, adapter: callAdapter, fluentTheme: fluentTheme, callInvitationUrl: props.joinInvitationURL, overrideSidePane: overrideSidePaneProps, onSidePaneIdChange: onSidePaneIdChange, mobileChatTabHeader: chatTabHeaderProps })))))));
207
+ React.createElement(CallCompositeInner, Object.assign({}, props, { formFactor: formFactor, options: callCompositeOptions, adapter: callAdapter, fluentTheme: fluentTheme, callInvitationUrl: props.joinInvitationURL, overrideSidePane: overrideSidePaneProps, onSidePaneIdChange: onSidePaneIdChange, mobileChatTabHeader: chatTabHeaderProps, onCloseChatPane: closeChat })))))));
200
208
  };
201
209
  /**
202
210
  * CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.
@@ -216,7 +224,11 @@ export const CallWithChatComposite = (props) => {
216
224
  /* @conditional-compile-remove(click-to-call) */
217
225
  localVideoTile: options === null || options === void 0 ? void 0 : options.localVideoTile,
218
226
  /* @conditional-compile-remove(gallery-layouts) */
219
- galleryOptions: options === null || options === void 0 ? void 0 : options.galleryOptions }))));
227
+ galleryOptions: options === null || options === void 0 ? void 0 : options.galleryOptions,
228
+ /* @conditional-compile-remove(custom-branding) */
229
+ logo: options === null || options === void 0 ? void 0 : options.logo,
230
+ /* @conditional-compile-remove(custom-branding) */
231
+ backgroundImage: options === null || options === void 0 ? void 0 : options.backgroundImage }))));
220
232
  };
221
233
  const hasJoinedCallFn = (page, callStatus) => {
222
234
  /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */
package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CallWithChatComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';\nimport { mergeStyles, PartialTheme, Stack, Theme } from '@fluentui/react';\nimport { CallCompositePage } from '../CallComposite';\nimport { CallState } from '@azure/communication-calling';\nimport { callCompositeContainerStyles, compositeOuterContainerStyles } from './styles/CallWithChatCompositeStyles';\nimport { CallWithChatAdapter } from './adapter/CallWithChatAdapter';\nimport { CallWithChatBackedCallAdapter } from './adapter/CallWithChatBackedCallAdapter';\nimport { CallWithChatBackedChatAdapter } from './adapter/CallWithChatBackedChatAdapter';\nimport { CallAdapter } from '../CallComposite';\nimport { ChatComposite, ChatCompositeProps } from '../ChatComposite';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallWithChatCompositeIcons } from '../common/icons';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { CallWithChatAdapterState } from './state/CallWithChatAdapterState';\nimport {\n ParticipantMenuItemsCallback,\n _useContainerHeight,\n _useContainerWidth,\n useTheme\n} from '@internal/react-components';\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(file-sharing) */\nimport { FileSharingOptions } from '../ChatComposite';\nimport { containerDivStyles } from '../common/ContainerRectProps';\nimport { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';\nimport { CallCompositeInner, CallCompositeOptions } from '../CallComposite/CallComposite';\n/* @conditional-compile-remove(pinned-participants) */\nimport { RemoteVideoTileMenuOptions } from '../CallComposite/CallComposite';\n/* @conditional-compile-remove(click-to-call) */\nimport { LocalVideoTileOptions } from '../CallComposite/CallComposite';\n/* @conditional-compile-remove(call-readiness) */\nimport { DeviceCheckOptions } from '../CallComposite/CallComposite';\nimport { CommonCallControlOptions } from '../common/types/CommonCallControlOptions';\nimport { ChatButtonWithUnreadMessagesBadge } from './ChatButton/ChatButtonWithUnreadMessagesBadge';\nimport { getDesktopCommonButtonStyles } from '../common/ControlBar/CommonCallControlBar';\nimport { InjectedSidePaneProps } from '../CallComposite/components/SidePane/SidePaneProvider';\nimport { isDisabled } from '../CallComposite/utils';\nimport {\n CustomCallControlButtonCallback,\n CustomCallControlButtonCallbackArgs\n} from '../common/ControlBar/CustomButton';\nimport { SidePaneHeader } from '../common/SidePaneHeader';\nimport { CallControlOptions } from '../CallComposite/types/CallControlOptions';\nimport { useUnreadMessagesTracker } from './ChatButton/useUnreadMessagesTracker';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { VideoGalleryLayout } from '@internal/react-components';\n\n/**\n * Props required for the {@link CallWithChatComposite}\n *\n * @public\n */\nexport interface CallWithChatCompositeProps extends BaseCompositeProps<CallWithChatCompositeIcons> {\n adapter: CallWithChatAdapter;\n /**\n * Fluent theme for the composite.\n *\n * Defaults to a light theme if undefined.\n */\n fluentTheme?: PartialTheme | Theme;\n /**\n * Optimizes the composite form factor for either desktop or mobile.\n * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.\n * @defaultValue 'desktop'\n */\n formFactor?: 'desktop' | 'mobile';\n /**\n * URL that can be used to copy a call-with-chat invite to the Users clipboard.\n */\n joinInvitationURL?: string;\n /**\n * Flags to enable/disable or customize UI elements of the {@link CallWithChatComposite}\n */\n options?: CallWithChatCompositeOptions;\n}\n\n/**\n * Customization options for the control bar in calling with chat experience.\n *\n * @public\n */\nexport interface CallWithChatControlOptions extends CommonCallControlOptions {\n /**\n * Show or hide the chat button in the call-with-chat composite control bar.\n * @defaultValue true\n */\n chatButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ { disabled: boolean };\n}\n\n/**\n * Optional features of the {@link CallWithChatComposite}.\n *\n * @public\n */\nexport type CallWithChatCompositeOptions = {\n /**\n * Call control options to change what buttons show on the call-with-chat composite control bar.\n * If using the boolean values, true will cause default behavior across the whole control bar. False hides the whole control bar.\n */\n callControls?: boolean | CallWithChatControlOptions;\n /* @conditional-compile-remove(file-sharing) */\n /**\n * Properties for configuring the File Sharing feature.\n * If undefined, file sharing feature will be disabled.\n * @beta\n */\n fileSharing?: FileSharingOptions;\n /* @conditional-compile-remove(call-readiness) */\n /**\n * Device permissions check options for your call.\n * Here you can choose what device permissions you prompt the user for,\n * as well as what device permissions must be accepted before starting a call.\n */\n deviceChecks?: DeviceCheckOptions;\n /* @conditional-compile-remove(call-readiness) */\n /**\n * Callback you may provide to supply users with further steps to troubleshoot why they have been\n * unable to grant your site the required permissions for the call.\n *\n * @example\n * ```ts\n * onPermissionsTroubleshootingClick: () =>\n * window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n * ```\n *\n * @remarks\n * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n */\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n /* @conditional-compile-remove(call-readiness) */\n /**\n * Optional callback to supply users with further troubleshooting steps for network issues\n * experienced when connecting to a call.\n *\n * @example\n * ```ts\n * onNetworkingTroubleShootingClick?: () =>\n * window.open('https://contoso.com/network-troubleshooting', '_blank');\n * ```\n *\n * @remarks\n * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n */\n onNetworkingTroubleShootingClick?: () => void;\n /* @conditional-compile-remove(unsupported-browser) */\n /**\n * Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.\n *\n * @example\n * ```ts\n * onBrowserTroubleShootingClick?: () =>\n * window.open('https://contoso.com/browser-troubleshooting', '_blank');\n * ```\n *\n * @remarks\n * if this is not supplied, the composite will not show a unsupported browser page.\n */\n onEnvironmentInfoTroubleshootingClick?: () => void;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * Remote participant video tile menu options\n */\n remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n /* @conditional-compile-remove(click-to-call) */\n /**\n * Options for controlling the local video tile.\n *\n * @remarks if 'false' the local video tile will not be rendered.\n */\n localVideoTile?: boolean | LocalVideoTileOptions;\n /* @conditional-compile-remove(gallery-layouts) */\n /**\n * Options for controlling the starting layout of the composite's video gallery\n */\n galleryOptions?: {\n /**\n * Layout for the gallery when the call starts\n */\n layout?: VideoGalleryLayout;\n };\n};\n\ntype CallWithChatScreenProps = {\n callWithChatAdapter: CallWithChatAdapter;\n fluentTheme?: PartialTheme | Theme;\n formFactor?: 'desktop' | 'mobile';\n joinInvitationURL?: string;\n callControls?: boolean | CallWithChatControlOptions;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n /* @conditional-compile-remove(file-sharing) */\n fileSharing?: FileSharingOptions;\n rtl?: boolean;\n /* @conditional-compile-remove(call-readiness) */\n deviceChecks?: DeviceCheckOptions;\n /* @conditional-compile-remove(call-readiness) */\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n /* @conditional-compile-remove(call-readiness) */\n onNetworkingTroubleShootingClick?: () => void;\n /* @conditional-compile-remove(unsupported-browser) */\n onEnvironmentInfoTroubleshootingClick?: () => void;\n /* @conditional-compile-remove(pinned-participants) */\n remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n /* @conditional-compile-remove(click-to-call) */\n localVideoTile?: boolean | LocalVideoTileOptions;\n /* @conditional-compile-remove(gallery-layouts) */\n galleryOptions?: {\n layout?: VideoGalleryLayout;\n };\n};\n\nconst CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {\n const { callWithChatAdapter, fluentTheme, formFactor = 'desktop' } = props;\n const mobileView = formFactor === 'mobile';\n\n if (!callWithChatAdapter) {\n throw new Error('CallWithChatAdapter is undefined');\n }\n\n const callAdapter: CallAdapter = useMemo(\n () => new CallWithChatBackedCallAdapter(callWithChatAdapter),\n [callWithChatAdapter]\n );\n\n const [currentCallState, setCurrentCallState] = useState<CallState>();\n const [currentPage, setCurrentPage] = useState<CallCompositePage>();\n const [isChatOpen, setIsChatOpen] = useState(false);\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const updateCallWithChatPage = (newState: CallWithChatAdapterState): void => {\n setCurrentPage(newState.page);\n setCurrentCallState(newState.call?.state);\n };\n updateCallWithChatPage(callWithChatAdapter.getState());\n callWithChatAdapter.onStateChange(updateCallWithChatPage);\n return () => {\n callWithChatAdapter.offStateChange(updateCallWithChatPage);\n };\n }, [callWithChatAdapter]);\n\n const chatProps: ChatCompositeProps = useMemo(() => {\n return {\n adapter: new CallWithChatBackedChatAdapter(callWithChatAdapter)\n };\n }, [callWithChatAdapter]);\n\n /** Constant setting of id for the parent stack of the composite */\n const compositeParentDivId = useId('callWithChatCompositeParentDiv-internal');\n\n const closeChat = useCallback(() => {\n setIsChatOpen(false);\n }, []);\n const openChat = useCallback(() => {\n setIsChatOpen(true);\n // timeout is required to give the window time to render the sendbox so we have something to send focus to.\n // TODO: Selecting elements in the DOM via attributes is not stable. We should expose an API from ChatComposite to be able to focus on the sendbox.\n const chatFocusTimeout = setInterval(() => {\n const callWithChatCompositeRootDiv = document.querySelector(`[id=\"${compositeParentDivId}\"]`);\n const sendbox = callWithChatCompositeRootDiv?.querySelector(`[id=\"sendbox\"]`) as HTMLTextAreaElement;\n if (sendbox !== null) {\n sendbox.focus();\n clearInterval(chatFocusTimeout);\n }\n }, 3);\n setTimeout(() => {\n clearInterval(chatFocusTimeout);\n }, 300);\n }, [compositeParentDivId]);\n\n const isOnHold = isOnHoldTrampoline(currentPage);\n useEffect(() => {\n if (isOnHold) {\n closeChat();\n }\n }, [closeChat, isOnHold]);\n\n const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState ?? 'None'));\n const toggleChat = useCallback(() => {\n isChatOpen || !hasJoinedCall ? closeChat() : openChat();\n }, [closeChat, hasJoinedCall, isChatOpen, openChat]);\n\n const callWithChatStrings = useCallWithChatCompositeStrings();\n const chatButtonStrings = useMemo(\n () => ({\n label: callWithChatStrings.chatButtonLabel,\n tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,\n tooltipOnContent: callWithChatStrings.chatButtonTooltipClose\n }),\n [callWithChatStrings]\n );\n const theme = useTheme();\n const commonButtonStyles = useMemo(\n () => (!mobileView ? getDesktopCommonButtonStyles(theme) : undefined),\n [mobileView, theme]\n );\n\n const showChatButton = checkShowChatButton(props.callControls);\n const chatButtonDisabled =\n showChatButton && (checkChatButtonIsDisabled(props.callControls) || !hasJoinedCall || isOnHold);\n const chatTabHeaderProps = useMemo(\n () =>\n mobileView && showChatButton\n ? {\n onClick: toggleChat,\n disabled: chatButtonDisabled\n }\n : undefined,\n [chatButtonDisabled, mobileView, toggleChat, showChatButton]\n );\n\n const unreadChatMessagesCount = useUnreadMessagesTracker(chatProps.adapter, isChatOpen);\n\n const customChatButton: CustomCallControlButtonCallback = useCallback(\n (args: CustomCallControlButtonCallbackArgs) => ({\n placement: mobileView ? 'primary' : 'secondary',\n onRenderButton: () => (\n <ChatButtonWithUnreadMessagesBadge\n checked={isChatOpen}\n showLabel={args.displayType !== 'compact'}\n onClick={toggleChat}\n disabled={chatButtonDisabled}\n strings={chatButtonStrings}\n styles={commonButtonStyles}\n newMessageLabel={callWithChatStrings.chatButtonNewMessageNotificationLabel}\n unreadChatMessagesCount={unreadChatMessagesCount}\n // As chat is disabled when on hold, we don't want to show the unread badge when on hold\n hideUnreadChatMessagesBadge={isOnHold}\n disableTooltip={mobileView}\n />\n )\n }),\n [\n callWithChatStrings.chatButtonNewMessageNotificationLabel,\n chatButtonStrings,\n commonButtonStyles,\n isChatOpen,\n chatButtonDisabled,\n mobileView,\n toggleChat,\n unreadChatMessagesCount,\n isOnHold\n ]\n );\n\n const callControlOptionsFromProps = useMemo(\n () => ({\n ...(typeof props.callControls === 'object' ? props.callControls : {})\n }),\n [props.callControls]\n );\n\n const injectedCustomButtonsFromProps = useMemo(() => {\n /* @conditional-compile-remove(control-bar-button-injection) */\n return [...(callControlOptionsFromProps.onFetchCustomButtonProps ?? [])];\n return [];\n }, [callControlOptionsFromProps]);\n\n const callCompositeOptions: CallCompositeOptions = useMemo(\n () => ({\n callControls:\n props.callControls === false\n ? false\n : ({\n ...callControlOptionsFromProps,\n onFetchCustomButtonProps: [\n ...(showChatButton ? [customChatButton] : []),\n /* @conditional-compile-remove(control-bar-button-injection) */\n ...injectedCustomButtonsFromProps\n ],\n legacyControlBarExperience: false\n } as CallControlOptions),\n /* @conditional-compile-remove(call-readiness) */\n deviceChecks: props.deviceChecks,\n /* @conditional-compile-remove(call-readiness) */\n onNetworkingTroubleShootingClick: props.onNetworkingTroubleShootingClick,\n /* @conditional-compile-remove(call-readiness) */\n onPermissionsTroubleshootingClick: props.onPermissionsTroubleshootingClick,\n /* @conditional-compile-remove(unsupported-browser) */\n onEnvironmentInfoTroubleshootingClick: props.onEnvironmentInfoTroubleshootingClick,\n /* @conditional-compile-remove(pinned-participants) */\n remoteVideoTileMenuOptions: props.remoteVideoTileMenuOptions,\n /* @conditional-compile-remove(gallery-layouts) */\n galleryOptions: props.galleryOptions,\n /* @conditional-compile-remove(click-to-call) */\n localVideoTile: props.localVideoTile\n }),\n [\n props.callControls,\n callControlOptionsFromProps,\n showChatButton,\n customChatButton,\n injectedCustomButtonsFromProps,\n /* @conditional-compile-remove(call-readiness) */\n props.deviceChecks,\n /* @conditional-compile-remove(unsupported-browser) */\n props.onEnvironmentInfoTroubleshootingClick,\n /* @conditional-compile-remove(call-readiness) */\n props.onNetworkingTroubleShootingClick,\n /* @conditional-compile-remove(call-readiness) */\n props.onPermissionsTroubleshootingClick,\n /* @conditional-compile-remove(gallery-layouts) */\n props.galleryOptions,\n /* @conditional-compile-remove(click-to-call) */\n props.localVideoTile,\n /* @conditional-compile-remove(pinned-participants) */\n props.remoteVideoTileMenuOptions\n ]\n );\n\n const onRenderChatContent = useCallback(\n (): JSX.Element => (\n <ChatComposite\n {...chatProps}\n fluentTheme={theme}\n options={{\n topic: false,\n /* @conditional-compile-remove(chat-composite-participant-pane) */\n participantPane: false,\n /* @conditional-compile-remove(file-sharing) */\n fileSharing: props.fileSharing\n }}\n onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n />\n ),\n [\n chatProps,\n /* @conditional-compile-remove(file-sharing) */ props.fileSharing,\n props.onFetchAvatarPersonaData,\n theme\n ]\n );\n\n const sidePaneHeaderRenderer = useCallback(\n () => (\n <SidePaneHeader\n headingText={callWithChatStrings.chatPaneTitle}\n onClose={closeChat}\n dismissSidePaneButtonAriaLabel={callWithChatStrings.dismissSidePaneButtonLabel ?? ''}\n mobileView={mobileView}\n />\n ),\n [callWithChatStrings.chatPaneTitle, callWithChatStrings.dismissSidePaneButtonLabel, closeChat, mobileView]\n );\n\n const sidePaneContentRenderer = useMemo(\n () => (hasJoinedCall ? onRenderChatContent : undefined),\n [hasJoinedCall, onRenderChatContent]\n );\n\n const sidePaneRenderer = useMemo(\n () => ({\n contentRenderer: sidePaneContentRenderer,\n headerRenderer: sidePaneHeaderRenderer,\n id: 'chat'\n }),\n [sidePaneContentRenderer, sidePaneHeaderRenderer]\n );\n\n const overrideSidePaneProps: InjectedSidePaneProps = useMemo(\n () => ({\n renderer: sidePaneRenderer,\n isActive: isChatOpen,\n persistRenderingWhenClosed: true\n }),\n [isChatOpen, sidePaneRenderer]\n );\n\n const onSidePaneIdChange = useCallback(\n (sidePaneId) => {\n // If the pane is switched to something other than chat, removing rendering chat.\n if (sidePaneId && sidePaneId !== 'chat') {\n closeChat();\n }\n },\n [closeChat]\n );\n return (\n <div ref={containerRef} className={mergeStyles(containerDivStyles)}>\n <Stack verticalFill grow styles={compositeOuterContainerStyles} id={compositeParentDivId}>\n <Stack horizontal grow>\n <Stack.Item grow styles={callCompositeContainerStyles(mobileView)}>\n <CallCompositeInner\n {...props}\n formFactor={formFactor}\n options={callCompositeOptions}\n adapter={callAdapter}\n fluentTheme={fluentTheme}\n callInvitationUrl={props.joinInvitationURL}\n overrideSidePane={overrideSidePaneProps}\n onSidePaneIdChange={onSidePaneIdChange}\n mobileChatTabHeader={chatTabHeaderProps}\n />\n </Stack.Item>\n </Stack>\n </Stack>\n </div>\n );\n};\n\n/**\n * CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.\n *\n * @public\n */\nexport const CallWithChatComposite = (props: CallWithChatCompositeProps): JSX.Element => {\n const { adapter, fluentTheme, rtl, formFactor, joinInvitationURL, options } = props;\n return (\n <BaseProvider fluentTheme={fluentTheme} rtl={rtl} locale={props.locale} icons={props.icons}>\n <CallWithChatScreen\n {...props}\n /* @conditional-compile-remove(call-readiness) */\n deviceChecks={options?.deviceChecks}\n callWithChatAdapter={adapter}\n formFactor={formFactor}\n callControls={options?.callControls}\n joinInvitationURL={joinInvitationURL}\n fluentTheme={fluentTheme}\n /* @conditional-compile-remove(pinned-participants) */\n remoteVideoTileMenuOptions={options?.remoteVideoTileMenuOptions}\n /* @conditional-compile-remove(file-sharing) */\n fileSharing={options?.fileSharing}\n /* @conditional-compile-remove(click-to-call) */\n localVideoTile={options?.localVideoTile}\n /* @conditional-compile-remove(gallery-layouts) */\n galleryOptions={options?.galleryOptions}\n />\n </BaseProvider>\n );\n};\n\nconst hasJoinedCallFn = (page: CallCompositePage, callStatus: CallState): boolean => {\n /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */\n return (\n (page === 'call' &&\n (callStatus === 'Connected' || callStatus === 'RemoteHold' || callStatus === 'Disconnecting')) ||\n (page === 'hold' && (callStatus === 'LocalHold' || callStatus === 'Disconnecting'))\n );\n return page === 'call' && (callStatus === 'Connected' || callStatus === 'Disconnecting');\n};\n\nconst checkShowChatButton = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n if (callControls === undefined || callControls === true) {\n return true;\n }\n if (callControls === false) {\n return false;\n }\n return callControls.chatButton !== false;\n};\n\nconst checkChatButtonIsDisabled = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n return typeof callControls === 'object' && isDisabled(callControls?.chatButton);\n};\n\nconst isOnHoldTrampoline = (page: CallCompositePage | undefined): boolean => {\n /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n return page === 'hold';\n return false;\n};\n\"../../../../react-components/src\""]}
1
+ {"version":3,"file":"CallWithChatComposite.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useCallback, useState, useMemo, useEffect, useRef } from 'react';\nimport { mergeStyles, PartialTheme, Stack, Theme } from '@fluentui/react';\nimport { CallCompositePage } from '../CallComposite';\nimport { CallState } from '@azure/communication-calling';\nimport { callCompositeContainerStyles, compositeOuterContainerStyles } from './styles/CallWithChatCompositeStyles';\nimport { CallWithChatAdapter } from './adapter/CallWithChatAdapter';\nimport { CallWithChatBackedCallAdapter } from './adapter/CallWithChatBackedCallAdapter';\nimport { CallWithChatBackedChatAdapter } from './adapter/CallWithChatBackedChatAdapter';\nimport { CallAdapter } from '../CallComposite';\nimport { ChatComposite, ChatCompositeProps } from '../ChatComposite';\nimport { BaseProvider, BaseCompositeProps } from '../common/BaseComposite';\nimport { CallWithChatCompositeIcons } from '../common/icons';\nimport { AvatarPersonaDataCallback } from '../common/AvatarPersona';\nimport { CallWithChatAdapterState } from './state/CallWithChatAdapterState';\nimport {\n ParticipantMenuItemsCallback,\n _useContainerHeight,\n _useContainerWidth,\n useTheme\n} from '@internal/react-components';\nimport { useId } from '@fluentui/react-hooks';\n/* @conditional-compile-remove(file-sharing) */\nimport { FileSharingOptions } from '../ChatComposite';\nimport { containerDivStyles } from '../common/ContainerRectProps';\nimport { useCallWithChatCompositeStrings } from './hooks/useCallWithChatCompositeStrings';\nimport { CallCompositeInner, CallCompositeOptions } from '../CallComposite/CallComposite';\n/* @conditional-compile-remove(pinned-participants) */\nimport { RemoteVideoTileMenuOptions } from '../CallComposite/CallComposite';\n/* @conditional-compile-remove(click-to-call) */\nimport { LocalVideoTileOptions } from '../CallComposite/CallComposite';\n/* @conditional-compile-remove(call-readiness) */\nimport { DeviceCheckOptions } from '../CallComposite/CallComposite';\nimport { CommonCallControlOptions } from '../common/types/CommonCallControlOptions';\nimport { ChatButtonWithUnreadMessagesBadge } from './ChatButton/ChatButtonWithUnreadMessagesBadge';\nimport { getDesktopCommonButtonStyles } from '../common/ControlBar/CommonCallControlBar';\nimport { InjectedSidePaneProps } from '../CallComposite/components/SidePane/SidePaneProvider';\nimport { isDisabled } from '../CallComposite/utils';\nimport {\n CustomCallControlButtonCallback,\n CustomCallControlButtonCallbackArgs\n} from '../common/ControlBar/CustomButton';\nimport { SidePaneHeader } from '../common/SidePaneHeader';\nimport { CallControlOptions } from '../CallComposite/types/CallControlOptions';\nimport { useUnreadMessagesTracker } from './ChatButton/useUnreadMessagesTracker';\n/* @conditional-compile-remove(gallery-layouts) */\nimport { VideoGalleryLayout } from '@internal/react-components';\n\n/**\n * Props required for the {@link CallWithChatComposite}\n *\n * @public\n */\nexport interface CallWithChatCompositeProps extends BaseCompositeProps<CallWithChatCompositeIcons> {\n adapter: CallWithChatAdapter;\n /**\n * Fluent theme for the composite.\n *\n * Defaults to a light theme if undefined.\n */\n fluentTheme?: PartialTheme | Theme;\n /**\n * Optimizes the composite form factor for either desktop or mobile.\n * @remarks `mobile` is currently only optimized for Portrait mode on mobile devices and does not support landscape.\n * @defaultValue 'desktop'\n */\n formFactor?: 'desktop' | 'mobile';\n /**\n * URL that can be used to copy a call-with-chat invite to the Users clipboard.\n */\n joinInvitationURL?: string;\n /**\n * Flags to enable/disable or customize UI elements of the {@link CallWithChatComposite}\n */\n options?: CallWithChatCompositeOptions;\n}\n\n/**\n * Customization options for the control bar in calling with chat experience.\n *\n * @public\n */\nexport interface CallWithChatControlOptions extends CommonCallControlOptions {\n /**\n * Show or hide the chat button in the call-with-chat composite control bar.\n * @defaultValue true\n */\n chatButton?: boolean | /* @conditional-compile-remove(PSTN-calls) */ { disabled: boolean };\n}\n\n/**\n * Optional features of the {@link CallWithChatComposite}.\n *\n * @public\n */\nexport type CallWithChatCompositeOptions = {\n /**\n * Call control options to change what buttons show on the call-with-chat composite control bar.\n * If using the boolean values, true will cause default behavior across the whole control bar. False hides the whole control bar.\n */\n callControls?: boolean | CallWithChatControlOptions;\n /* @conditional-compile-remove(file-sharing) */\n /**\n * Properties for configuring the File Sharing feature.\n * If undefined, file sharing feature will be disabled.\n * @beta\n */\n fileSharing?: FileSharingOptions;\n /* @conditional-compile-remove(call-readiness) */\n /**\n * Device permissions check options for your call.\n * Here you can choose what device permissions you prompt the user for,\n * as well as what device permissions must be accepted before starting a call.\n */\n deviceChecks?: DeviceCheckOptions;\n /* @conditional-compile-remove(call-readiness) */\n /**\n * Callback you may provide to supply users with further steps to troubleshoot why they have been\n * unable to grant your site the required permissions for the call.\n *\n * @example\n * ```ts\n * onPermissionsTroubleshootingClick: () =>\n * window.open('https://contoso.com/permissions-troubleshooting', '_blank');\n * ```\n *\n * @remarks\n * if this is not supplied, the composite will not show a 'further troubleshooting' link.\n */\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n /* @conditional-compile-remove(call-readiness) */\n /**\n * Optional callback to supply users with further troubleshooting steps for network issues\n * experienced when connecting to a call.\n *\n * @example\n * ```ts\n * onNetworkingTroubleShootingClick?: () =>\n * window.open('https://contoso.com/network-troubleshooting', '_blank');\n * ```\n *\n * @remarks\n * if this is not supplied, the composite will not show a 'network troubleshooting' link.\n */\n onNetworkingTroubleShootingClick?: () => void;\n /* @conditional-compile-remove(unsupported-browser) */\n /**\n * Callback you may provide to supply users with a provided page to showcase supported browsers by ACS.\n *\n * @example\n * ```ts\n * onBrowserTroubleShootingClick?: () =>\n * window.open('https://contoso.com/browser-troubleshooting', '_blank');\n * ```\n *\n * @remarks\n * if this is not supplied, the composite will not show a unsupported browser page.\n */\n onEnvironmentInfoTroubleshootingClick?: () => void;\n /* @conditional-compile-remove(pinned-participants) */\n /**\n * Remote participant video tile menu options\n */\n remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n /* @conditional-compile-remove(click-to-call) */\n /**\n * Options for controlling the local video tile.\n *\n * @remarks if 'false' the local video tile will not be rendered.\n */\n localVideoTile?: boolean | LocalVideoTileOptions;\n /* @conditional-compile-remove(gallery-layouts) */\n /**\n * Options for controlling the starting layout of the composite's video gallery\n */\n galleryOptions?: {\n /**\n * Layout for the gallery when the call starts\n */\n layout?: VideoGalleryLayout;\n };\n /* @conditional-compile-remove(custom-branding) */\n /**\n * Logo displayed on the configuration page.\n */\n logo?: {\n /**\n * URL for the logo image.\n *\n * @remarks\n * Recommended size is 80x80 pixels.\n */\n url: string;\n /**\n * Alt text for the logo image.\n */\n alt?: string;\n /**\n * The logo can be displayed as a circle or a square.\n *\n * @defaultValue 'circle'\n */\n shape?: 'circle' | 'square';\n };\n /* @conditional-compile-remove(custom-branding) */\n /**\n * Background image displayed on the configuration page.\n */\n backgroundImage?: {\n /**\n * URL for the background image.\n *\n * @remarks\n * Background image should be larger than 576x567 pixels and smaller than 2048x2048 pixels pixels.\n */\n url: string;\n };\n};\n\ntype CallWithChatScreenProps = {\n callWithChatAdapter: CallWithChatAdapter;\n fluentTheme?: PartialTheme | Theme;\n formFactor?: 'desktop' | 'mobile';\n joinInvitationURL?: string;\n callControls?: boolean | CallWithChatControlOptions;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n /* @conditional-compile-remove(file-sharing) */\n fileSharing?: FileSharingOptions;\n rtl?: boolean;\n /* @conditional-compile-remove(call-readiness) */\n deviceChecks?: DeviceCheckOptions;\n /* @conditional-compile-remove(call-readiness) */\n onPermissionsTroubleshootingClick?: (permissionsState: {\n camera: PermissionState;\n microphone: PermissionState;\n }) => void;\n /* @conditional-compile-remove(call-readiness) */\n onNetworkingTroubleShootingClick?: () => void;\n /* @conditional-compile-remove(unsupported-browser) */\n onEnvironmentInfoTroubleshootingClick?: () => void;\n /* @conditional-compile-remove(pinned-participants) */\n remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n /* @conditional-compile-remove(click-to-call) */\n localVideoTile?: boolean | LocalVideoTileOptions;\n /* @conditional-compile-remove(gallery-layouts) */\n galleryOptions?: {\n layout?: VideoGalleryLayout;\n };\n /* @conditional-compile-remove(custom-branding) */\n logo?: {\n url: string;\n alt?: string;\n shape?: 'circle' | 'square';\n };\n /* @conditional-compile-remove(custom-branding) */\n backgroundImage?: {\n url: string;\n };\n};\n\nconst CallWithChatScreen = (props: CallWithChatScreenProps): JSX.Element => {\n const { callWithChatAdapter, fluentTheme, formFactor = 'desktop' } = props;\n const mobileView = formFactor === 'mobile';\n\n if (!callWithChatAdapter) {\n throw new Error('CallWithChatAdapter is undefined');\n }\n\n const callAdapter: CallAdapter = useMemo(\n () => new CallWithChatBackedCallAdapter(callWithChatAdapter),\n [callWithChatAdapter]\n );\n\n const [currentCallState, setCurrentCallState] = useState<CallState>();\n const [currentPage, setCurrentPage] = useState<CallCompositePage>();\n const [isChatOpen, setIsChatOpen] = useState(false);\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const updateCallWithChatPage = (newState: CallWithChatAdapterState): void => {\n setCurrentPage(newState.page);\n setCurrentCallState(newState.call?.state);\n };\n updateCallWithChatPage(callWithChatAdapter.getState());\n callWithChatAdapter.onStateChange(updateCallWithChatPage);\n return () => {\n callWithChatAdapter.offStateChange(updateCallWithChatPage);\n };\n }, [callWithChatAdapter]);\n\n const chatProps: ChatCompositeProps = useMemo(() => {\n return {\n adapter: new CallWithChatBackedChatAdapter(callWithChatAdapter)\n };\n }, [callWithChatAdapter]);\n\n /** Constant setting of id for the parent stack of the composite */\n const compositeParentDivId = useId('callWithChatCompositeParentDiv-internal');\n\n const closeChat = useCallback(() => {\n setIsChatOpen(false);\n }, []);\n const openChat = useCallback(() => {\n setIsChatOpen(true);\n // timeout is required to give the window time to render the sendbox so we have something to send focus to.\n // TODO: Selecting elements in the DOM via attributes is not stable. We should expose an API from ChatComposite to be able to focus on the sendbox.\n const chatFocusTimeout = setInterval(() => {\n const callWithChatCompositeRootDiv = document.querySelector(`[id=\"${compositeParentDivId}\"]`);\n const sendbox = callWithChatCompositeRootDiv?.querySelector(`[id=\"sendbox\"]`) as HTMLTextAreaElement;\n if (sendbox !== null) {\n sendbox.focus();\n clearInterval(chatFocusTimeout);\n }\n }, 3);\n setTimeout(() => {\n clearInterval(chatFocusTimeout);\n }, 300);\n }, [compositeParentDivId]);\n\n const isOnHold = isOnHoldTrampoline(currentPage);\n useEffect(() => {\n if (isOnHold) {\n closeChat();\n }\n }, [closeChat, isOnHold]);\n\n const hasJoinedCall = !!(currentPage && hasJoinedCallFn(currentPage, currentCallState ?? 'None'));\n const toggleChat = useCallback(() => {\n isChatOpen || !hasJoinedCall ? closeChat() : openChat();\n }, [closeChat, hasJoinedCall, isChatOpen, openChat]);\n\n const callWithChatStrings = useCallWithChatCompositeStrings();\n const chatButtonStrings = useMemo(\n () => ({\n label: callWithChatStrings.chatButtonLabel,\n tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,\n tooltipOnContent: callWithChatStrings.chatButtonTooltipClose\n }),\n [callWithChatStrings]\n );\n const theme = useTheme();\n const commonButtonStyles = useMemo(\n () => (!mobileView ? getDesktopCommonButtonStyles(theme) : undefined),\n [mobileView, theme]\n );\n\n const showChatButton = checkShowChatButton(props.callControls);\n const chatButtonDisabled =\n showChatButton && (checkChatButtonIsDisabled(props.callControls) || !hasJoinedCall || isOnHold);\n const chatTabHeaderProps = useMemo(\n () =>\n mobileView && showChatButton\n ? {\n onClick: toggleChat,\n disabled: chatButtonDisabled\n }\n : undefined,\n [chatButtonDisabled, mobileView, toggleChat, showChatButton]\n );\n\n const unreadChatMessagesCount = useUnreadMessagesTracker(chatProps.adapter, isChatOpen);\n\n const customChatButton: CustomCallControlButtonCallback = useCallback(\n (args: CustomCallControlButtonCallbackArgs) => ({\n placement: mobileView ? 'primary' : 'secondary',\n onRenderButton: () => (\n <ChatButtonWithUnreadMessagesBadge\n checked={isChatOpen}\n showLabel={args.displayType !== 'compact'}\n onClick={toggleChat}\n disabled={chatButtonDisabled}\n strings={chatButtonStrings}\n styles={commonButtonStyles}\n newMessageLabel={callWithChatStrings.chatButtonNewMessageNotificationLabel}\n unreadChatMessagesCount={unreadChatMessagesCount}\n // As chat is disabled when on hold, we don't want to show the unread badge when on hold\n hideUnreadChatMessagesBadge={isOnHold}\n disableTooltip={mobileView}\n />\n )\n }),\n [\n callWithChatStrings.chatButtonNewMessageNotificationLabel,\n chatButtonStrings,\n commonButtonStyles,\n isChatOpen,\n chatButtonDisabled,\n mobileView,\n toggleChat,\n unreadChatMessagesCount,\n isOnHold\n ]\n );\n\n const callControlOptionsFromProps = useMemo(\n () => ({\n ...(typeof props.callControls === 'object' ? props.callControls : {})\n }),\n [props.callControls]\n );\n\n const injectedCustomButtonsFromProps = useMemo(() => {\n /* @conditional-compile-remove(control-bar-button-injection) */\n return [...(callControlOptionsFromProps.onFetchCustomButtonProps ?? [])];\n return [];\n }, [callControlOptionsFromProps]);\n\n const callCompositeOptions: CallCompositeOptions = useMemo(\n () => ({\n callControls:\n props.callControls === false\n ? false\n : ({\n ...callControlOptionsFromProps,\n onFetchCustomButtonProps: [\n ...(showChatButton ? [customChatButton] : []),\n /* @conditional-compile-remove(control-bar-button-injection) */\n ...injectedCustomButtonsFromProps\n ],\n legacyControlBarExperience: false\n } as CallControlOptions),\n /* @conditional-compile-remove(call-readiness) */\n deviceChecks: props.deviceChecks,\n /* @conditional-compile-remove(call-readiness) */\n onNetworkingTroubleShootingClick: props.onNetworkingTroubleShootingClick,\n /* @conditional-compile-remove(call-readiness) */\n onPermissionsTroubleshootingClick: props.onPermissionsTroubleshootingClick,\n /* @conditional-compile-remove(unsupported-browser) */\n onEnvironmentInfoTroubleshootingClick: props.onEnvironmentInfoTroubleshootingClick,\n /* @conditional-compile-remove(pinned-participants) */\n remoteVideoTileMenuOptions: props.remoteVideoTileMenuOptions,\n /* @conditional-compile-remove(gallery-layouts) */\n galleryOptions: props.galleryOptions,\n /* @conditional-compile-remove(click-to-call) */\n localVideoTile: props.localVideoTile,\n /* @conditional-compile-remove(custom-branding) */\n logo: props.logo,\n /* @conditional-compile-remove(custom-branding) */\n backgroundImage: props.backgroundImage\n }),\n [\n props.callControls,\n callControlOptionsFromProps,\n showChatButton,\n customChatButton,\n injectedCustomButtonsFromProps,\n /* @conditional-compile-remove(call-readiness) */\n props.deviceChecks,\n /* @conditional-compile-remove(unsupported-browser) */\n props.onEnvironmentInfoTroubleshootingClick,\n /* @conditional-compile-remove(call-readiness) */\n props.onNetworkingTroubleShootingClick,\n /* @conditional-compile-remove(call-readiness) */\n props.onPermissionsTroubleshootingClick,\n /* @conditional-compile-remove(gallery-layouts) */\n props.galleryOptions,\n /* @conditional-compile-remove(click-to-call) */\n props.localVideoTile,\n /* @conditional-compile-remove(pinned-participants) */\n props.remoteVideoTileMenuOptions,\n /* @conditional-compile-remove(custom-branding) */\n props.logo,\n /* @conditional-compile-remove(custom-branding) */\n props.backgroundImage\n ]\n );\n\n const onRenderChatContent = useCallback(\n (): JSX.Element => (\n <ChatComposite\n {...chatProps}\n fluentTheme={theme}\n options={{\n topic: false,\n /* @conditional-compile-remove(chat-composite-participant-pane) */\n participantPane: false,\n /* @conditional-compile-remove(file-sharing) */\n fileSharing: props.fileSharing\n }}\n onFetchAvatarPersonaData={props.onFetchAvatarPersonaData}\n />\n ),\n [\n chatProps,\n /* @conditional-compile-remove(file-sharing) */ props.fileSharing,\n props.onFetchAvatarPersonaData,\n theme\n ]\n );\n\n const sidePaneHeaderRenderer = useCallback(\n () => (\n <SidePaneHeader\n headingText={callWithChatStrings.chatPaneTitle}\n onClose={closeChat}\n dismissSidePaneButtonAriaLabel={callWithChatStrings.dismissSidePaneButtonLabel ?? ''}\n mobileView={mobileView}\n />\n ),\n [callWithChatStrings.chatPaneTitle, callWithChatStrings.dismissSidePaneButtonLabel, closeChat, mobileView]\n );\n\n const sidePaneContentRenderer = useMemo(\n () => (hasJoinedCall ? onRenderChatContent : undefined),\n [hasJoinedCall, onRenderChatContent]\n );\n\n const sidePaneRenderer = useMemo(\n () => ({\n contentRenderer: sidePaneContentRenderer,\n headerRenderer: sidePaneHeaderRenderer,\n id: 'chat'\n }),\n [sidePaneContentRenderer, sidePaneHeaderRenderer]\n );\n\n const overrideSidePaneProps: InjectedSidePaneProps = useMemo(\n () => ({\n renderer: sidePaneRenderer,\n isActive: isChatOpen,\n persistRenderingWhenClosed: true\n }),\n [isChatOpen, sidePaneRenderer]\n );\n\n const onSidePaneIdChange = useCallback(\n (sidePaneId) => {\n // If the pane is switched to something other than chat, removing rendering chat.\n if (sidePaneId && sidePaneId !== 'chat') {\n closeChat();\n }\n },\n [closeChat]\n );\n return (\n <div ref={containerRef} className={mergeStyles(containerDivStyles)}>\n <Stack verticalFill grow styles={compositeOuterContainerStyles} id={compositeParentDivId}>\n <Stack horizontal grow>\n <Stack.Item grow styles={callCompositeContainerStyles(mobileView)}>\n <CallCompositeInner\n {...props}\n formFactor={formFactor}\n options={callCompositeOptions}\n adapter={callAdapter}\n fluentTheme={fluentTheme}\n callInvitationUrl={props.joinInvitationURL}\n overrideSidePane={overrideSidePaneProps}\n onSidePaneIdChange={onSidePaneIdChange}\n mobileChatTabHeader={chatTabHeaderProps}\n onCloseChatPane={closeChat}\n />\n </Stack.Item>\n </Stack>\n </Stack>\n </div>\n );\n};\n\n/**\n * CallWithChatComposite brings together key components to provide a full call with chat experience out of the box.\n *\n * @public\n */\nexport const CallWithChatComposite = (props: CallWithChatCompositeProps): JSX.Element => {\n const { adapter, fluentTheme, rtl, formFactor, joinInvitationURL, options } = props;\n return (\n <BaseProvider fluentTheme={fluentTheme} rtl={rtl} locale={props.locale} icons={props.icons}>\n <CallWithChatScreen\n {...props}\n /* @conditional-compile-remove(call-readiness) */\n deviceChecks={options?.deviceChecks}\n callWithChatAdapter={adapter}\n formFactor={formFactor}\n callControls={options?.callControls}\n joinInvitationURL={joinInvitationURL}\n fluentTheme={fluentTheme}\n /* @conditional-compile-remove(pinned-participants) */\n remoteVideoTileMenuOptions={options?.remoteVideoTileMenuOptions}\n /* @conditional-compile-remove(file-sharing) */\n fileSharing={options?.fileSharing}\n /* @conditional-compile-remove(click-to-call) */\n localVideoTile={options?.localVideoTile}\n /* @conditional-compile-remove(gallery-layouts) */\n galleryOptions={options?.galleryOptions}\n /* @conditional-compile-remove(custom-branding) */\n logo={options?.logo}\n /* @conditional-compile-remove(custom-branding) */\n backgroundImage={options?.backgroundImage}\n />\n </BaseProvider>\n );\n};\n\nconst hasJoinedCallFn = (page: CallCompositePage, callStatus: CallState): boolean => {\n /* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(one-to-n-calling) */\n return (\n (page === 'call' &&\n (callStatus === 'Connected' || callStatus === 'RemoteHold' || callStatus === 'Disconnecting')) ||\n (page === 'hold' && (callStatus === 'LocalHold' || callStatus === 'Disconnecting'))\n );\n return page === 'call' && (callStatus === 'Connected' || callStatus === 'Disconnecting');\n};\n\nconst checkShowChatButton = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n if (callControls === undefined || callControls === true) {\n return true;\n }\n if (callControls === false) {\n return false;\n }\n return callControls.chatButton !== false;\n};\n\nconst checkChatButtonIsDisabled = (callControls?: boolean | CallWithChatControlOptions): boolean => {\n return typeof callControls === 'object' && isDisabled(callControls?.chatButton);\n};\n\nconst isOnHoldTrampoline = (page: CallCompositePage | undefined): boolean => {\n /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n return page === 'hold';\n return false;\n};\n\"../../../../react-components/src\""]}
package/dist/dist-esm/react-composites/src/composites/common/ModalLocalAndRemotePIP.d.ts CHANGED
@@ -1,6 +1,15 @@
1
1
  /// <reference types="react" />
2
2
  import { _ICoordinates } from "../../../../react-components/src";
3
3
  import { ModalLocalAndRemotePIPStyles } from './styles/ModalLocalAndRemotePIP.styles';
4
+ /**
5
+ * @private
6
+ */
7
+ export interface ModalLocalAndRemotePIPStrings {
8
+ /**
9
+ * Aria label for dismiss control when using keyboard
10
+ */
11
+ dismissModalAriaLabel?: string;
12
+ }
4
13
  /**
5
14
  * A wrapping component with a draggable {@link LocalAndRemotePIP} component that is bound to a LayerHost component with id
6
15
  * specified by `modalLayerHostId` prop
@@ -12,5 +21,7 @@ export declare const ModalLocalAndRemotePIP: (props: {
12
21
  styles?: ModalLocalAndRemotePIPStyles;
13
22
  minDragPosition?: _ICoordinates;
14
23
  maxDragPosition?: _ICoordinates;
24
+ onDismissSidePane?: () => void;
25
+ strings?: ModalLocalAndRemotePIPStrings;
15
26
  }) => JSX.Element | null;
16
27
  //# sourceMappingURL=ModalLocalAndRemotePIP.d.ts.map
package/dist/dist-esm/react-composites/src/composites/common/ModalLocalAndRemotePIP.js CHANGED
@@ -1,7 +1,7 @@
1
1
  // Copyright (c) Microsoft Corporation.
2
2
  // Licensed under the MIT License.
3
3
  import { concatStyleSets, ContextualMenu, Stack } from '@fluentui/react';
4
- import React, { useMemo } from 'react';
4
+ import React, { useCallback, useMemo, useState } from 'react';
5
5
  import { LocalAndRemotePIP } from '../CallComposite/components/LocalAndRemotePIP';
6
6
  import { useHandlers } from '../CallComposite/hooks/useHandlers';
7
7
  import { useSelector } from '../CallComposite/hooks/useSelector';
@@ -34,24 +34,54 @@ export const ModalLocalAndRemotePIP = (props) => {
34
34
  /* @conditional-compile-remove(rooms) */
35
35
  const role = (_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role;
36
36
  const pictureInPictureProps = useSelector(localAndRemotePIPSelector);
37
+ const [touchStartTouches, setTouchStartTouches] = useState(null);
38
+ const onTouchEnd = useCallback((event) => {
39
+ var _a;
40
+ if (touchStartTouches && touchStartTouches.length === 1 && event.changedTouches.length === 1) {
41
+ const touchStartTouch = touchStartTouches[0];
42
+ const touchEndTouch = event.changedTouches[0];
43
+ if (Math.abs(touchStartTouch.clientX - touchEndTouch.clientX) < 10 &&
44
+ Math.abs(touchStartTouch.clientY - touchEndTouch.clientY) < 10) {
45
+ (_a = props.onDismissSidePane) === null || _a === void 0 ? void 0 : _a.call(props);
46
+ }
47
+ }
48
+ }, [props, touchStartTouches]);
49
+ const onTouchStart = useCallback((event) => {
50
+ setTouchStartTouches(event.touches);
51
+ }, []);
52
+ const onKeyDown = useCallback((event) => {
53
+ var _a;
54
+ if (event.key === 'Enter' || event.key === ' ') {
55
+ (_a = props.onDismissSidePane) === null || _a === void 0 ? void 0 : _a.call(props);
56
+ }
57
+ }, [props]);
37
58
  const pictureInPictureHandlers = useHandlers(LocalAndRemotePIP);
38
59
  const localAndRemotePIP = useMemo(() => {
39
- var _a;
60
+ var _a, _b, _c, _d, _e;
40
61
  /* @conditional-compile-remove(rooms) */
41
62
  if (role === 'Consumer' && ((_a = pictureInPictureProps.dominantRemoteParticipant) === null || _a === void 0 ? void 0 : _a.userId)) {
42
- return (React.createElement(_RemoteVideoTile, Object.assign({}, pictureInPictureProps.dominantRemoteParticipant, { remoteParticipant: pictureInPictureProps.dominantRemoteParticipant })));
63
+ return (React.createElement(Stack, { tabIndex: 0, "aria-label": (_c = (_b = props.strings) === null || _b === void 0 ? void 0 : _b.dismissModalAriaLabel) !== null && _c !== void 0 ? _c : '', onKeyDown: onKeyDown },
64
+ React.createElement(_RemoteVideoTile, Object.assign({}, pictureInPictureProps.dominantRemoteParticipant, { remoteParticipant: pictureInPictureProps.dominantRemoteParticipant }))));
43
65
  }
44
- return React.createElement(LocalAndRemotePIP, Object.assign({}, pictureInPictureProps, pictureInPictureHandlers));
45
- }, [pictureInPictureProps, pictureInPictureHandlers, /* @conditional-compile-remove(rooms) */ role]);
66
+ return (React.createElement(Stack, { tabIndex: 0, "aria-label": (_e = (_d = props.strings) === null || _d === void 0 ? void 0 : _d.dismissModalAriaLabel) !== null && _e !== void 0 ? _e : '', onKeyDown: onKeyDown },
67
+ React.createElement(LocalAndRemotePIP, Object.assign({}, pictureInPictureProps, pictureInPictureHandlers))));
68
+ }, [
69
+ /* @conditional-compile-remove(rooms) */ role,
70
+ onKeyDown,
71
+ pictureInPictureProps,
72
+ props,
73
+ pictureInPictureHandlers
74
+ ]);
46
75
  /* @conditional-compile-remove(rooms) */
47
76
  if (role === 'Consumer' && !pictureInPictureProps.dominantRemoteParticipant) {
48
77
  return null;
49
78
  }
50
79
  const modalStylesThemed = concatStyleSets(modalStyle, (_b = props.styles) === null || _b === void 0 ? void 0 : _b.modal);
51
80
  return (React.createElement(Stack, { styles: rootStyles },
52
- React.createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: modalStylesThemed, layerProps: { hostId: props.modalLayerHostId }, minDragPosition: props.minDragPosition, maxDragPosition: props.maxDragPosition },
53
- // Only render LocalAndRemotePIP when this component is NOT hidden because VideoGallery needs to have
54
- // possession of the dominant remote participant video stream
55
- !props.hidden && localAndRemotePIP)));
81
+ React.createElement(Stack, { onTouchStart: onTouchStart, onTouchEnd: onTouchEnd },
82
+ React.createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: modalStylesThemed, layerProps: { hostId: props.modalLayerHostId }, minDragPosition: props.minDragPosition, maxDragPosition: props.maxDragPosition },
83
+ // Only render LocalAndRemotePIP when this component is NOT hidden because VideoGallery needs to have
84
+ // possession of the dominant remote participant video stream
85
+ !props.hidden && localAndRemotePIP))));
56
86
  };
57
87
  //# sourceMappingURL=ModalLocalAndRemotePIP.js.map
package/dist/dist-esm/react-composites/src/composites/common/ModalLocalAndRemotePIP.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ModalLocalAndRemotePIP.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ModalLocalAndRemotePIP.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACvF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,sDAAsD,CAAC;AACjG,OAAO,EAAE,WAAW,EAAiB,yCAAmC;AACxE,wCAAwC;AACxC,OAAO,EAAE,gBAAgB,EAAE,yCAAmC;AAC9D,OAAO,EACL,WAAW,EAEX,UAAU,EACV,iBAAiB,EAClB,MAAM,wCAAwC,CAAC;AAChD,wCAAwC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,8CAA8C,CAAC;AAE1E;;GAEG;AACH,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAMtC,EAAsB,EAAE;;IACvB,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAElE,wCAAwC;IACxC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,wCAAwC;IACxC,MAAM,IAAI,GAAG,MAAA,OAAO,CAAC,QAAQ,EAAE,CAAC,IAAI,0CAAE,IAAI,CAAC;IAE3C,MAAM,qBAAqB,GAAG,WAAW,CAAC,yBAAyB,CAAC,CAAC;IAErE,MAAM,wBAAwB,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAChE,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;;QACrC,wCAAwC;QACxC,IAAI,IAAI,KAAK,UAAU,KAAI,MAAA,qBAAqB,CAAC,yBAAyB,0CAAE,MAAM,CAAA,EAAE;YAClF,OAAO,CACL,oBAAC,gBAAgB,oBACX,qBAAqB,CAAC,yBAAyB,IACnD,iBAAiB,EAAE,qBAAqB,CAAC,yBAAyB,IAClE,CACH,CAAC;SACH;QACD,OAAO,oBAAC,iBAAiB,oBAAK,qBAAqB,EAAM,wBAAwB,EAAI,CAAC;IACxF,CAAC,EAAE,CAAC,qBAAqB,EAAE,wBAAwB,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC,CAAC;IAErG,wCAAwC;IACxC,IAAI,IAAI,KAAK,UAAU,IAAI,CAAC,qBAAqB,CAAC,yBAAyB,EAAE;QAC3E,OAAO,IAAI,CAAC;KACb;IAED,MAAM,iBAAiB,GAAG,eAAe,CAAC,UAAU,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,KAAK,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU;QACvB,oBAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,iBAAiB,EACzB,UAAU,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,gBAAgB,EAAE,EAC9C,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,eAAe,EAAE,KAAK,CAAC,eAAe;QAGpC,qGAAqG;QACrG,6DAA6D;QAC7D,CAAC,KAAK,CAAC,MAAM,IAAI,iBAAiB,CAExB,CACR,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, ContextualMenu, IDragOptions, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { LocalAndRemotePIP } from '../CallComposite/components/LocalAndRemotePIP';\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\nimport { useSelector } from '../CallComposite/hooks/useSelector';\nimport { localAndRemotePIPSelector } from '../CallComposite/selectors/localAndRemotePIPSelector';\nimport { _ModalClone, _ICoordinates } from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _RemoteVideoTile } from '@internal/react-components';\nimport {\n hiddenStyle,\n ModalLocalAndRemotePIPStyles,\n modalStyle,\n PIPContainerStyle\n} from './styles/ModalLocalAndRemotePIP.styles';\n/* @conditional-compile-remove(rooms) */\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\n\n/**\n * Drag options for Modal in {@link ModalLocalAndRemotePIP} component\n */\nconst DRAG_OPTIONS: IDragOptions = {\n moveMenuItemText: 'Move',\n closeMenuItemText: 'Close',\n menu: ContextualMenu,\n keepInBounds: true\n};\n\n/**\n * A wrapping component with a draggable {@link LocalAndRemotePIP} component that is bound to a LayerHost component with id\n * specified by `modalLayerHostId` prop\n * @private\n */\nexport const ModalLocalAndRemotePIP = (props: {\n hidden: boolean;\n modalLayerHostId: string;\n styles?: ModalLocalAndRemotePIPStyles;\n minDragPosition?: _ICoordinates;\n maxDragPosition?: _ICoordinates;\n}): JSX.Element | null => {\n const rootStyles = props.hidden ? hiddenStyle : PIPContainerStyle;\n\n /* @conditional-compile-remove(rooms) */\n const adapter = useAdapter();\n /* @conditional-compile-remove(rooms) */\n const role = adapter.getState().call?.role;\n\n const pictureInPictureProps = useSelector(localAndRemotePIPSelector);\n\n const pictureInPictureHandlers = useHandlers(LocalAndRemotePIP);\n const localAndRemotePIP = useMemo(() => {\n /* @conditional-compile-remove(rooms) */\n if (role === 'Consumer' && pictureInPictureProps.dominantRemoteParticipant?.userId) {\n return (\n <_RemoteVideoTile\n {...pictureInPictureProps.dominantRemoteParticipant}\n remoteParticipant={pictureInPictureProps.dominantRemoteParticipant}\n />\n );\n }\n return <LocalAndRemotePIP {...pictureInPictureProps} {...pictureInPictureHandlers} />;\n }, [pictureInPictureProps, pictureInPictureHandlers, /* @conditional-compile-remove(rooms) */ role]);\n\n /* @conditional-compile-remove(rooms) */\n if (role === 'Consumer' && !pictureInPictureProps.dominantRemoteParticipant) {\n return null;\n }\n\n const modalStylesThemed = concatStyleSets(modalStyle, props.styles?.modal);\n\n return (\n <Stack styles={rootStyles}>\n <_ModalClone\n isOpen={true}\n isModeless={true}\n dragOptions={DRAG_OPTIONS}\n styles={modalStylesThemed}\n layerProps={{ hostId: props.modalLayerHostId }}\n minDragPosition={props.minDragPosition}\n maxDragPosition={props.maxDragPosition}\n >\n {\n // Only render LocalAndRemotePIP when this component is NOT hidden because VideoGallery needs to have\n // possession of the dominant remote participant video stream\n !props.hidden && localAndRemotePIP\n }\n </_ModalClone>\n </Stack>\n );\n};\n\"../../../../react-components/src\""]}
1
+ {"version":3,"file":"ModalLocalAndRemotePIP.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ModalLocalAndRemotePIP.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { concatStyleSets, ContextualMenu, IDragOptions, Stack } from '@fluentui/react';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { LocalAndRemotePIP } from '../CallComposite/components/LocalAndRemotePIP';\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\nimport { useSelector } from '../CallComposite/hooks/useSelector';\nimport { localAndRemotePIPSelector } from '../CallComposite/selectors/localAndRemotePIPSelector';\nimport { _ModalClone, _ICoordinates } from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _RemoteVideoTile } from '@internal/react-components';\nimport {\n hiddenStyle,\n ModalLocalAndRemotePIPStyles,\n modalStyle,\n PIPContainerStyle\n} from './styles/ModalLocalAndRemotePIP.styles';\n/* @conditional-compile-remove(rooms) */\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\n\n/**\n * Drag options for Modal in {@link ModalLocalAndRemotePIP} component\n */\nconst DRAG_OPTIONS: IDragOptions = {\n moveMenuItemText: 'Move',\n closeMenuItemText: 'Close',\n menu: ContextualMenu,\n keepInBounds: true\n};\n\n/**\n * @private\n */\nexport interface ModalLocalAndRemotePIPStrings {\n /**\n * Aria label for dismiss control when using keyboard\n */\n dismissModalAriaLabel?: string;\n}\n\n/**\n * A wrapping component with a draggable {@link LocalAndRemotePIP} component that is bound to a LayerHost component with id\n * specified by `modalLayerHostId` prop\n * @private\n */\nexport const ModalLocalAndRemotePIP = (props: {\n hidden: boolean;\n modalLayerHostId: string;\n styles?: ModalLocalAndRemotePIPStyles;\n minDragPosition?: _ICoordinates;\n maxDragPosition?: _ICoordinates;\n onDismissSidePane?: () => void;\n strings?: ModalLocalAndRemotePIPStrings;\n}): JSX.Element | null => {\n const rootStyles = props.hidden ? hiddenStyle : PIPContainerStyle;\n\n /* @conditional-compile-remove(rooms) */\n const adapter = useAdapter();\n /* @conditional-compile-remove(rooms) */\n const role = adapter.getState().call?.role;\n\n const pictureInPictureProps = useSelector(localAndRemotePIPSelector);\n\n const [touchStartTouches, setTouchStartTouches] = useState<React.TouchList | null>(null);\n\n const onTouchEnd = useCallback(\n (event) => {\n if (touchStartTouches && touchStartTouches.length === 1 && event.changedTouches.length === 1) {\n const touchStartTouch = touchStartTouches[0];\n const touchEndTouch = event.changedTouches[0];\n if (\n Math.abs(touchStartTouch.clientX - touchEndTouch.clientX) < 10 &&\n Math.abs(touchStartTouch.clientY - touchEndTouch.clientY) < 10\n ) {\n props.onDismissSidePane?.();\n }\n }\n },\n [props, touchStartTouches]\n );\n\n const onTouchStart = useCallback((event) => {\n setTouchStartTouches(event.touches);\n }, []);\n\n const onKeyDown = useCallback(\n (event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n props.onDismissSidePane?.();\n }\n },\n [props]\n );\n\n const pictureInPictureHandlers = useHandlers(LocalAndRemotePIP);\n const localAndRemotePIP = useMemo(() => {\n /* @conditional-compile-remove(rooms) */\n if (role === 'Consumer' && pictureInPictureProps.dominantRemoteParticipant?.userId) {\n return (\n <Stack tabIndex={0} aria-label={props.strings?.dismissModalAriaLabel ?? ''} onKeyDown={onKeyDown}>\n <_RemoteVideoTile\n {...pictureInPictureProps.dominantRemoteParticipant}\n remoteParticipant={pictureInPictureProps.dominantRemoteParticipant}\n />\n </Stack>\n );\n }\n return (\n <Stack tabIndex={0} aria-label={props.strings?.dismissModalAriaLabel ?? ''} onKeyDown={onKeyDown}>\n <LocalAndRemotePIP {...pictureInPictureProps} {...pictureInPictureHandlers} />\n </Stack>\n );\n }, [\n /* @conditional-compile-remove(rooms) */ role,\n onKeyDown,\n pictureInPictureProps,\n props,\n pictureInPictureHandlers\n ]);\n\n /* @conditional-compile-remove(rooms) */\n if (role === 'Consumer' && !pictureInPictureProps.dominantRemoteParticipant) {\n return null;\n }\n\n const modalStylesThemed = concatStyleSets(modalStyle, props.styles?.modal);\n\n return (\n <Stack styles={rootStyles}>\n <Stack onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>\n <_ModalClone\n isOpen={true}\n isModeless={true}\n dragOptions={DRAG_OPTIONS}\n styles={modalStylesThemed}\n layerProps={{ hostId: props.modalLayerHostId }}\n minDragPosition={props.minDragPosition}\n maxDragPosition={props.maxDragPosition}\n >\n {\n // Only render LocalAndRemotePIP when this component is NOT hidden because VideoGallery needs to have\n // possession of the dominant remote participant video stream\n !props.hidden && localAndRemotePIP\n }\n </_ModalClone>\n </Stack>\n </Stack>\n );\n};\n\"../../../../react-components/src\""]}
package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js CHANGED
@@ -147,7 +147,7 @@ const VideoEffectsPaneTrampoline = (onDismissError, activeVideoEffectError, sele
147
147
  /* @conditional-compile-remove(video-background-effects) */
148
148
  const locale = useLocale();
149
149
  /* @conditional-compile-remove(video-background-effects) */
150
- return (React.createElement(Stack, { className: mergeStyles({ paddingLeft: '0.5rem' }) },
150
+ return (React.createElement(Stack, { tokens: { childrenGap: '0.75rem' }, className: mergeStyles({ paddingLeft: '0.5rem' }) },
151
151
  activeVideoEffectError && isCameraOn && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: () => onDismissError(activeVideoEffectError) }, locale.strings.call.unableToStartVideoEffect)),
152
152
  showWarning && (React.createElement(MessageBar, { messageBarType: MessageBarType.warning }, locale.strings.call.cameraOffBackgroundEffectWarningText)),
153
153
  React.createElement(_VideoBackgroundEffectsPicker, { label: locale.strings.call.videoEffectsPaneBackgroundSelectionTitle, styles: backgroundPickerStyles, options: selectableVideoEffects !== null && selectableVideoEffects !== void 0 ? selectableVideoEffects : [], onChange: onEffectChange, selectedEffectKey: selectedEffect })));
package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"VideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/VideoEffectsPane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;;;;;;;;;;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,2DAA2D;AAC3D,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,2DAA2D;AAC3D,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACjF,2DAA2D;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,2DAA2D;AAC3D,OAAO,EAAE,6BAA6B,EAAE,yCAAmC;AAQ3E,2DAA2D;AAC3D,OAAO,EAAE,mCAAmC,EAAE,MAAM,gEAAgE,CAAC;AACrH,2DAA2D;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,2DAA2D;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,8CAA8C,CAAC;AAC1E,2DAA2D;AAC3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,qDAAqD,CAAC;AAGzF;;;GAGG;AACH,YAAY;AACZ,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAIvC,EAAe,EAAE;;IAChB,MAAM,EACJ,cAAc,EACd,sBAAsB;IACtB,2DAA2D;IAC3D,uBAAuB,EACxB,GAAG,KAAK,CAAC;IACV,2DAA2D;IAC3D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,2DAA2D;IAC3D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,2DAA2D;IAC3D,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;IACpC,2DAA2D;IAC3D,MAAM,kBAAkB,GAAG,MAAA,WAAW,CAAC,kBAAkB,CAAC,CAAC,kBAAkB,0CAAE,aAAa,CAAC;IAC7F,2DAA2D;IAC3D,MAAM,sBAAsB,GAA6B,OAAO,CAAC,GAAG,EAAE;QACpE,MAAM,YAAY,GAA6B;YAC7C;gBACE,OAAO,EAAE,MAAM;gBACf,SAAS,EAAE;oBACT,QAAQ,EAAE,6BAA6B;iBACxC;gBACD,KAAK,EAAE,OAAO,CAAC,iCAAiC;gBAChD,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO,CAAC,uBAAuB;iBACzC;aACF;YACD;gBACE,OAAO,EAAE,MAAM;gBACf,SAAS,EAAE;oBACT,QAAQ,EAAE,qBAAqB;iBAChC;gBACD,KAAK,EAAE,OAAO,CAAC,+BAA+B;gBAC9C,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO,CAAC,qBAAqB;iBACvC;aACF;SACF,CAAC;QACF,MAAM,iBAAiB,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,qBAAqB,CAAC;QAEnE,IAAI,iBAAiB,EAAE;YACrB,iBAAiB,CAAC,OAAO,CAAC,CAAC,GAAyB,EAAE,EAAE;;gBACtD,YAAY,CAAC,IAAI,CAAC;oBAChB,OAAO,EAAE,GAAG,CAAC,GAAG;oBAChB,eAAe,EAAE;wBACf,GAAG,EAAE,GAAG,CAAC,GAAG;qBACb;oBACD,YAAY,EAAE;wBACZ,OAAO,EAAE,MAAA,GAAG,CAAC,WAAW,mCAAI,EAAE;qBAC/B;iBACF,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;SACJ;QACD,OAAO,YAAY,CAAC;IACtB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvB,2DAA2D;IAC3D,MAAM,cAAc,GAAG,WAAW,CAChC,CAAO,SAAiB,EAAE,EAAE;QAC1B,IAAI,SAAS,KAAK,MAAM,EAAE;YACxB,MAAM,UAAU,GAA8B;gBAC5C,UAAU,EAAE,SAAS;aACtB,CAAC;YACF,uBAAuB,CAAC;gBACtB,IAAI,EAAE,MAAM;gBACZ,SAAS,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;aAChC,CAAC,CAAC;YACH,MAAM,OAAO,CAAC,0BAA0B,CAAC,UAAU,CAAC,CAAC;YACrD,OAAO,CAAC,mCAAmC,CAAC,UAAU,CAAC,CAAC;SACzD;aAAM,IAAI,SAAS,KAAK,MAAM,EAAE;YAC/B,MAAM,UAAU,GAA4B;gBAC1C,UAAU,EAAE,SAAS;aACtB,CAAC;YACF,MAAM,OAAO,CAAC,0BAA0B,EAAE,CAAC;YAC3C,OAAO,CAAC,mCAAmC,CAAC,UAAU,CAAC,CAAC;SACzD;aAAM;YACL,MAAM,aAAa,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;gBAC3D,OAAO,MAAM,CAAC,OAAO,KAAK,SAAS,CAAC;YACtC,CAAC,CAAC,CAAC;YACH,IAAI,aAAa,IAAI,aAAa,CAAC,eAAe,EAAE;gBAClD,MAAM,aAAa,GAAqC;oBACtD,UAAU,EAAE,aAAa;oBACzB,GAAG,EAAE,SAAS;oBACd,kBAAkB,EAAE,aAAa,CAAC,eAAe,CAAC,GAAG;iBACtD,CAAC;gBACF,uBAAuB,CAAC;oBACtB,IAAI,EAAE,aAAa;oBACnB,SAAS,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;iBAChC,CAAC,CAAC;gBACH,MAAM,OAAO,CAAC,0BAA0B,CAAC,aAAa,CAAC,CAAC;gBACxD,OAAO,CAAC,mCAAmC,CAAC,aAAa,CAAC,CAAC;aAC5D;SACF;IACH,CAAC,CAAA,EACD,CAAC,OAAO,EAAE,uBAAuB,EAAE,sBAAsB,CAAC,CAC3D,CAAC;IAEF,2DAA2D;IAC3D,IAAI,sBAAsB,IAAI,kBAAkB,IAAI,kBAAkB,CAAC,MAAM,KAAK,CAAC,EAAE;QACnF,MAAM,UAAU,GAA4B;YAC1C,UAAU,EAAE,MAAM;SACnB,CAAC;QACF,OAAO,CAAC,mCAAmC,CAAC,UAAU,CAAC,CAAC;KACzD;IACD,OAAO,0BAA0B,CAC/B,cAAc,EACd,sBAAsB;IACtB,2DAA2D;IAC3D,sBAAsB;IACtB,2DAA2D;IAC3D,cAAc,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,CACjC,cAAmD,EACnD,sBAA2C,EAC3C,sBAAiD,EACjD,cAAqD,EACxC,EAAE;IACf,2DAA2D;IAC3D,MAAM,cAAc,GAAG,WAAW,CAAC,mCAAmC,CAAC,CAAC;IACxE,2DAA2D;IAC3D,MAAM,UAAU,GAAG,WAAW,CAAC,kBAAkB,CAAC,CAAC,WAAW,CAAC;IAC/D,2DAA2D;IAC3D,MAAM,WAAW,GAAG,CAAC,UAAU,IAAI,cAAc,KAAK,MAAM,CAAC;IAC7D,2DAA2D;IAC3D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,2DAA2D;IAC3D,OAAO,CACL,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC;QACrD,sBAAsB,IAAI,UAAU,IAAI,CACvC,oBAAC,UAAU,IAAC,cAAc,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,sBAAsB,CAAC,IACtG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,wBAAwB,CAClC,CACd;QACA,WAAW,IAAI,CACd,oBAAC,UAAU,IAAC,cAAc,EAAE,cAAc,CAAC,OAAO,IAC/C,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,oCAAoC,CAC9C,CACd;QACD,oBAAC,6BAA6B,IAC5B,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,wCAAwC,EACnE,MAAM,EAAE,sBAAsB,EAC9B,OAAO,EAAE,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,EAAE,EACrC,QAAQ,EAAE,cAAc,EACxB,iBAAiB,EAAE,cAAc,GACjC,CACI,CACT,CAAC;IACF,OAAO,yCAAK,CAAC;AACf,CAAC,CAAC;AAEF,2DAA2D;AAC3D,MAAM,sBAAsB,GAAG;IAC7B,KAAK,EAAE;QACL,QAAQ,EAAE,SAAS;QACnB,UAAU,EAAE,QAAQ;QACpB,UAAU,EAAE,KAAK;KAClB;CACF,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { MessageBar, MessageBarType, Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useLocale } from '../localization';\nimport { ActiveErrorMessage, _VideoEffectsItemProps } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport { _VideoBackgroundEffectsPicker } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport {\n VideoBackgroundImage,\n VideoBackgroundBlurEffect,\n VideoBackgroundNoEffect,\n VideoBackgroundReplacementEffect\n} from '../CallComposite';\n/* @conditional-compile-remove(video-background-effects) */\nimport { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useSelector } from '../CallComposite/hooks/useSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\n/* @conditional-compile-remove(video-background-effects) */\nimport { localVideoSelector } from '../CallComposite/selectors/localVideoStreamSelector';\nimport { ActiveVideoEffect } from '../CallComposite/components/SidePane/useVideoEffectsPane';\n\n/**\n * Pane that is used to show video effects button\n * @private\n */\n/** @beta */\nexport const VideoEffectsPaneContent = (props: {\n activeVideoEffectError?: ActiveErrorMessage;\n onDismissError: (error: ActiveErrorMessage) => void;\n activeVideoEffectChange: (effect: ActiveVideoEffect) => void;\n}): JSX.Element => {\n const {\n onDismissError,\n activeVideoEffectError,\n /* @conditional-compile-remove(video-background-effects) */\n activeVideoEffectChange\n } = props;\n /* @conditional-compile-remove(video-background-effects) */\n const locale = useLocale();\n /* @conditional-compile-remove(video-background-effects) */\n const adapter = useAdapter();\n /* @conditional-compile-remove(video-background-effects) */\n const strings = locale.strings.call;\n /* @conditional-compile-remove(video-background-effects) */\n const activeVideoEffects = useSelector(localVideoSelector).activeVideoEffects?.activeEffects;\n /* @conditional-compile-remove(video-background-effects) */\n const selectableVideoEffects: _VideoEffectsItemProps[] = useMemo(() => {\n const videoEffects: _VideoEffectsItemProps[] = [\n {\n itemKey: 'none',\n iconProps: {\n iconName: 'RemoveVideoBackgroundEffect'\n },\n title: strings.removeBackgroundEffectButtonLabel,\n tooltipProps: {\n content: strings.removeBackgroundTooltip\n }\n },\n {\n itemKey: 'blur',\n iconProps: {\n iconName: 'BlurVideoBackground'\n },\n title: strings.blurBackgroundEffectButtonLabel,\n tooltipProps: {\n content: strings.blurBackgroundTooltip\n }\n }\n ];\n const videoEffectImages = adapter.getState().videoBackgroundImages;\n\n if (videoEffectImages) {\n videoEffectImages.forEach((img: VideoBackgroundImage) => {\n videoEffects.push({\n itemKey: img.key,\n backgroundProps: {\n url: img.url\n },\n tooltipProps: {\n content: img.tooltipText ?? ''\n }\n });\n });\n }\n return videoEffects;\n }, [strings, adapter]);\n\n /* @conditional-compile-remove(video-background-effects) */\n const onEffectChange = useCallback(\n async (effectKey: string) => {\n if (effectKey === 'blur') {\n const blurEffect: VideoBackgroundBlurEffect = {\n effectName: effectKey\n };\n activeVideoEffectChange({\n type: 'blur',\n timestamp: new Date(Date.now())\n });\n await adapter.startVideoBackgroundEffect(blurEffect);\n adapter.updateSelectedVideoBackgroundEffect(blurEffect);\n } else if (effectKey === 'none') {\n const noneEffect: VideoBackgroundNoEffect = {\n effectName: effectKey\n };\n await adapter.stopVideoBackgroundEffects();\n adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n } else {\n const backgroundImg = selectableVideoEffects.find((effect) => {\n return effect.itemKey === effectKey;\n });\n if (backgroundImg && backgroundImg.backgroundProps) {\n const replaceEffect: VideoBackgroundReplacementEffect = {\n effectName: 'replacement',\n key: effectKey,\n backgroundImageUrl: backgroundImg.backgroundProps.url\n };\n activeVideoEffectChange({\n type: 'replacement',\n timestamp: new Date(Date.now())\n });\n await adapter.startVideoBackgroundEffect(replaceEffect);\n adapter.updateSelectedVideoBackgroundEffect(replaceEffect);\n }\n }\n },\n [adapter, activeVideoEffectChange, selectableVideoEffects]\n );\n\n /* @conditional-compile-remove(video-background-effects) */\n if (activeVideoEffectError && activeVideoEffects && activeVideoEffects.length === 0) {\n const noneEffect: VideoBackgroundNoEffect = {\n effectName: 'none'\n };\n adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n }\n return VideoEffectsPaneTrampoline(\n onDismissError,\n activeVideoEffectError,\n /* @conditional-compile-remove(video-background-effects) */\n selectableVideoEffects,\n /* @conditional-compile-remove(video-background-effects) */\n onEffectChange\n );\n};\n\nconst VideoEffectsPaneTrampoline = (\n onDismissError: (error: ActiveErrorMessage) => void,\n activeVideoEffectError?: ActiveErrorMessage,\n selectableVideoEffects?: _VideoEffectsItemProps[],\n onEffectChange?: (effectKey: string) => Promise<void>\n): JSX.Element => {\n /* @conditional-compile-remove(video-background-effects) */\n const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);\n /* @conditional-compile-remove(video-background-effects) */\n const isCameraOn = useSelector(localVideoSelector).isAvailable;\n /* @conditional-compile-remove(video-background-effects) */\n const showWarning = !isCameraOn && selectedEffect !== 'none';\n /* @conditional-compile-remove(video-background-effects) */\n const locale = useLocale();\n\n /* @conditional-compile-remove(video-background-effects) */\n return (\n <Stack className={mergeStyles({ paddingLeft: '0.5rem' })}>\n {activeVideoEffectError && isCameraOn && (\n <MessageBar messageBarType={MessageBarType.error} onDismiss={() => onDismissError(activeVideoEffectError)}>\n {locale.strings.call.unableToStartVideoEffect}\n </MessageBar>\n )}\n {showWarning && (\n <MessageBar messageBarType={MessageBarType.warning}>\n {locale.strings.call.cameraOffBackgroundEffectWarningText}\n </MessageBar>\n )}\n <_VideoBackgroundEffectsPicker\n label={locale.strings.call.videoEffectsPaneBackgroundSelectionTitle}\n styles={backgroundPickerStyles}\n options={selectableVideoEffects ?? []}\n onChange={onEffectChange}\n selectedEffectKey={selectedEffect}\n />\n </Stack>\n );\n return <></>;\n};\n\n/* @conditional-compile-remove(video-background-effects) */\nconst backgroundPickerStyles = {\n label: {\n fontSize: '0.75rem',\n lineHeight: '0.5rem',\n fontWeight: '400'\n }\n};\n\"../../../../react-components/src\""]}
1
+ {"version":3,"file":"VideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/VideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { MessageBar, MessageBarType, Stack, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useLocale } from '../localization';\nimport { ActiveErrorMessage, _VideoEffectsItemProps } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport { _VideoBackgroundEffectsPicker } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport {\n VideoBackgroundImage,\n VideoBackgroundBlurEffect,\n VideoBackgroundNoEffect,\n VideoBackgroundReplacementEffect\n} from '../CallComposite';\n/* @conditional-compile-remove(video-background-effects) */\nimport { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useSelector } from '../CallComposite/hooks/useSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\n/* @conditional-compile-remove(video-background-effects) */\nimport { localVideoSelector } from '../CallComposite/selectors/localVideoStreamSelector';\nimport { ActiveVideoEffect } from '../CallComposite/components/SidePane/useVideoEffectsPane';\n\n/**\n * Pane that is used to show video effects button\n * @private\n */\n/** @beta */\nexport const VideoEffectsPaneContent = (props: {\n activeVideoEffectError?: ActiveErrorMessage;\n onDismissError: (error: ActiveErrorMessage) => void;\n activeVideoEffectChange: (effect: ActiveVideoEffect) => void;\n}): JSX.Element => {\n const {\n onDismissError,\n activeVideoEffectError,\n /* @conditional-compile-remove(video-background-effects) */\n activeVideoEffectChange\n } = props;\n /* @conditional-compile-remove(video-background-effects) */\n const locale = useLocale();\n /* @conditional-compile-remove(video-background-effects) */\n const adapter = useAdapter();\n /* @conditional-compile-remove(video-background-effects) */\n const strings = locale.strings.call;\n /* @conditional-compile-remove(video-background-effects) */\n const activeVideoEffects = useSelector(localVideoSelector).activeVideoEffects?.activeEffects;\n /* @conditional-compile-remove(video-background-effects) */\n const selectableVideoEffects: _VideoEffectsItemProps[] = useMemo(() => {\n const videoEffects: _VideoEffectsItemProps[] = [\n {\n itemKey: 'none',\n iconProps: {\n iconName: 'RemoveVideoBackgroundEffect'\n },\n title: strings.removeBackgroundEffectButtonLabel,\n tooltipProps: {\n content: strings.removeBackgroundTooltip\n }\n },\n {\n itemKey: 'blur',\n iconProps: {\n iconName: 'BlurVideoBackground'\n },\n title: strings.blurBackgroundEffectButtonLabel,\n tooltipProps: {\n content: strings.blurBackgroundTooltip\n }\n }\n ];\n const videoEffectImages = adapter.getState().videoBackgroundImages;\n\n if (videoEffectImages) {\n videoEffectImages.forEach((img: VideoBackgroundImage) => {\n videoEffects.push({\n itemKey: img.key,\n backgroundProps: {\n url: img.url\n },\n tooltipProps: {\n content: img.tooltipText ?? ''\n }\n });\n });\n }\n return videoEffects;\n }, [strings, adapter]);\n\n /* @conditional-compile-remove(video-background-effects) */\n const onEffectChange = useCallback(\n async (effectKey: string) => {\n if (effectKey === 'blur') {\n const blurEffect: VideoBackgroundBlurEffect = {\n effectName: effectKey\n };\n activeVideoEffectChange({\n type: 'blur',\n timestamp: new Date(Date.now())\n });\n await adapter.startVideoBackgroundEffect(blurEffect);\n adapter.updateSelectedVideoBackgroundEffect(blurEffect);\n } else if (effectKey === 'none') {\n const noneEffect: VideoBackgroundNoEffect = {\n effectName: effectKey\n };\n await adapter.stopVideoBackgroundEffects();\n adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n } else {\n const backgroundImg = selectableVideoEffects.find((effect) => {\n return effect.itemKey === effectKey;\n });\n if (backgroundImg && backgroundImg.backgroundProps) {\n const replaceEffect: VideoBackgroundReplacementEffect = {\n effectName: 'replacement',\n key: effectKey,\n backgroundImageUrl: backgroundImg.backgroundProps.url\n };\n activeVideoEffectChange({\n type: 'replacement',\n timestamp: new Date(Date.now())\n });\n await adapter.startVideoBackgroundEffect(replaceEffect);\n adapter.updateSelectedVideoBackgroundEffect(replaceEffect);\n }\n }\n },\n [adapter, activeVideoEffectChange, selectableVideoEffects]\n );\n\n /* @conditional-compile-remove(video-background-effects) */\n if (activeVideoEffectError && activeVideoEffects && activeVideoEffects.length === 0) {\n const noneEffect: VideoBackgroundNoEffect = {\n effectName: 'none'\n };\n adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n }\n return VideoEffectsPaneTrampoline(\n onDismissError,\n activeVideoEffectError,\n /* @conditional-compile-remove(video-background-effects) */\n selectableVideoEffects,\n /* @conditional-compile-remove(video-background-effects) */\n onEffectChange\n );\n};\n\nconst VideoEffectsPaneTrampoline = (\n onDismissError: (error: ActiveErrorMessage) => void,\n activeVideoEffectError?: ActiveErrorMessage,\n selectableVideoEffects?: _VideoEffectsItemProps[],\n onEffectChange?: (effectKey: string) => Promise<void>\n): JSX.Element => {\n /* @conditional-compile-remove(video-background-effects) */\n const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);\n /* @conditional-compile-remove(video-background-effects) */\n const isCameraOn = useSelector(localVideoSelector).isAvailable;\n /* @conditional-compile-remove(video-background-effects) */\n const showWarning = !isCameraOn && selectedEffect !== 'none';\n /* @conditional-compile-remove(video-background-effects) */\n const locale = useLocale();\n\n /* @conditional-compile-remove(video-background-effects) */\n return (\n <Stack tokens={{ childrenGap: '0.75rem' }} className={mergeStyles({ paddingLeft: '0.5rem' })}>\n {activeVideoEffectError && isCameraOn && (\n <MessageBar messageBarType={MessageBarType.error} onDismiss={() => onDismissError(activeVideoEffectError)}>\n {locale.strings.call.unableToStartVideoEffect}\n </MessageBar>\n )}\n {showWarning && (\n <MessageBar messageBarType={MessageBarType.warning}>\n {locale.strings.call.cameraOffBackgroundEffectWarningText}\n </MessageBar>\n )}\n <_VideoBackgroundEffectsPicker\n label={locale.strings.call.videoEffectsPaneBackgroundSelectionTitle}\n styles={backgroundPickerStyles}\n options={selectableVideoEffects ?? []}\n onChange={onEffectChange}\n selectedEffectKey={selectedEffect}\n />\n </Stack>\n );\n return <></>;\n};\n\n/* @conditional-compile-remove(video-background-effects) */\nconst backgroundPickerStyles = {\n label: {\n fontSize: '0.75rem',\n lineHeight: '0.5rem',\n fontWeight: '400'\n }\n};\n\"../../../../react-components/src\""]}
package/dist/dist-esm/react-composites/src/composites/common/styles/ModalLocalAndRemotePIP.styles.js CHANGED
@@ -29,7 +29,15 @@ export const getPipStyles = (theme) => ({
29
29
  * @private
30
30
  */
31
31
  export const PIPContainerStyle = {
32
- root: { position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none' }
32
+ root: {
33
+ position: 'absolute',
34
+ width: '100%',
35
+ height: '100%',
36
+ pointerEvents: 'none',
37
+ ':focus-within': {
38
+ outline: '1px solid #00000000'
39
+ }
40
+ }
33
41
  };
34
42
  /**
35
43
  * @private
@@ -52,7 +60,11 @@ export const modalStyle = {
52
60
  width: '100%',
53
61
  height: '100%',
54
62
  // pointer events for root Modal div set to none to make descendants interactive
55
- pointerEvents: 'none'
63
+ pointerEvents: 'none',
64
+ ':focus-within': {
65
+ outline: '3px solid #00000000',
66
+ outlineOffset: '-3px'
67
+ }
56
68
  }
57
69
  };
58
70
  /**
package/dist/dist-esm/react-composites/src/composites/common/styles/ModalLocalAndRemotePIP.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ModalLocalAndRemotePIP.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/styles/ModalLocalAndRemotePIP.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,eAAe,EAOhB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAOnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,eAAe,EAAE,EAAE;IACnB,aAAa,EAAE,EAAE;IACjB,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,GAAG;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAa,EAAgC,EAAE,CAAC,CAAC;IAC5E,KAAK,EAAE;QACL,IAAI,gCACF,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,EAC1C,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;YACnC,0CAA0C;YAC1C,MAAM,EAAE,CAAC,IACN,CAAC,KAAK,CAAC,GAAG;YACX,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,oBAAoB,CAAC,eAAe,CAAC,EAAE;YAC1D,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,eAAe,CAAC,EAAE,CAAC,KAC9D,GAAG,EAAE,QAAQ,CAAC,oBAAoB,CAAC,aAAa,CAAC,GAClD;KACF;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAiB;IAC7C,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE;CACrF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAiB,eAAe,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC;AAE3G;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAA2D;IAChF,IAAI,EAAE;QACJ,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,aAAa;QACxB,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,QAAQ;QAClB,sFAAsF;QACtF,aAAa,EAAE,MAAM;QACrB,WAAW,EAAE,MAAM;KACpB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,gFAAgF;QAChF,aAAa,EAAE,MAAM;KACtB;CACF,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAW;IACzC,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,QAAQ;IAChB,2EAA2E;IAC3E,aAAa,EAAE,MAAM;CACtB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n concatStyleSets,\n IModalStyleProps,\n IModalStyles,\n IStackStyles,\n IStyle,\n IStyleFunctionOrObject,\n ITheme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * Styles for {@link ModalLocalAndRemotePIP} component\n */\nexport type ModalLocalAndRemotePIPStyles = { modal?: Partial<IModalStyles> };\n\n/**\n * Default Modal PIP related pixel measurements used for ModalLocalAndremotePIP and common/utils.\n *\n * @private\n */\nexport const MODAL_PIP_DEFAULT_PX = {\n rightPositionPx: 16,\n topPositionPx: 52,\n widthPx: 88,\n heightPx: 128\n};\n\n/**\n * @private\n */\nexport const getPipStyles = (theme: ITheme): ModalLocalAndRemotePIPStyles => ({\n modal: {\n main: {\n borderRadius: theme.effects.roundedCorner4,\n boxShadow: theme.effects.elevation8,\n // Above the message thread / people pane.\n zIndex: 2,\n ...(theme.rtl\n ? { left: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }\n : { right: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }),\n top: _pxToRem(MODAL_PIP_DEFAULT_PX.topPositionPx)\n }\n }\n});\n\n/**\n * @private\n */\nexport const PIPContainerStyle: IStackStyles = {\n root: { position: 'absolute', width: '100%', height: '100%', pointerEvents: 'none' }\n};\n\n/**\n * @private\n */\nexport const hiddenStyle: IStackStyles = concatStyleSets(PIPContainerStyle, { root: { display: 'none' } });\n\n/**\n * @private\n */\nexport const modalStyle: IStyleFunctionOrObject<IModalStyleProps, IModalStyles> = {\n main: {\n minWidth: 'min-content',\n minHeight: 'min-content',\n position: 'absolute',\n overflow: 'hidden',\n // pointer events for root Modal div set to auto to make LocalAndRemotePIP interactive\n pointerEvents: 'auto',\n touchAction: 'none'\n },\n root: {\n width: '100%',\n height: '100%',\n // pointer events for root Modal div set to none to make descendants interactive\n pointerEvents: 'none'\n }\n};\n\n/**\n * Styles for layer host to bound the modal wrapping PiPiP in the mobile pane.\n * @private\n */\nexport const modalLayerHostStyle: IStyle = {\n display: 'flex',\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n zIndex: '100000',\n // pointer events for layerHost set to none to make descendants interactive\n pointerEvents: 'none'\n};\n\"../../../../../acs-ui-common/src\""]}
1
+ {"version":3,"file":"ModalLocalAndRemotePIP.styles.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/styles/ModalLocalAndRemotePIP.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EACL,eAAe,EAOhB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,yCAAgC;AAOnD;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,eAAe,EAAE,EAAE;IACnB,aAAa,EAAE,EAAE;IACjB,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,GAAG;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAa,EAAgC,EAAE,CAAC,CAAC;IAC5E,KAAK,EAAE;QACL,IAAI,gCACF,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,EAC1C,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU;YACnC,0CAA0C;YAC1C,MAAM,EAAE,CAAC,IACN,CAAC,KAAK,CAAC,GAAG;YACX,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,oBAAoB,CAAC,eAAe,CAAC,EAAE;YAC1D,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,CAAC,oBAAoB,CAAC,eAAe,CAAC,EAAE,CAAC,KAC9D,GAAG,EAAE,QAAQ,CAAC,oBAAoB,CAAC,aAAa,CAAC,GAClD;KACF;CACF,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAiB;IAC7C,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,aAAa,EAAE,MAAM;QACrB,eAAe,EAAE;YACf,OAAO,EAAE,qBAAqB;SAC/B;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAiB,eAAe,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC;AAE3G;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAA2D;IAChF,IAAI,EAAE;QACJ,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,aAAa;QACxB,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,QAAQ;QAClB,sFAAsF;QACtF,aAAa,EAAE,MAAM;QACrB,WAAW,EAAE,MAAM;KACpB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,gFAAgF;QAChF,aAAa,EAAE,MAAM;QACrB,eAAe,EAAE;YACf,OAAO,EAAE,qBAAqB;YAC9B,aAAa,EAAE,MAAM;SACtB;KACF;CACF,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAW;IACzC,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,QAAQ;IAClB,MAAM,EAAE,QAAQ;IAChB,2EAA2E;IAC3E,aAAa,EAAE,MAAM;CACtB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport {\n concatStyleSets,\n IModalStyleProps,\n IModalStyles,\n IStackStyles,\n IStyle,\n IStyleFunctionOrObject,\n ITheme\n} from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\n\n/**\n * Styles for {@link ModalLocalAndRemotePIP} component\n */\nexport type ModalLocalAndRemotePIPStyles = { modal?: Partial<IModalStyles> };\n\n/**\n * Default Modal PIP related pixel measurements used for ModalLocalAndremotePIP and common/utils.\n *\n * @private\n */\nexport const MODAL_PIP_DEFAULT_PX = {\n rightPositionPx: 16,\n topPositionPx: 52,\n widthPx: 88,\n heightPx: 128\n};\n\n/**\n * @private\n */\nexport const getPipStyles = (theme: ITheme): ModalLocalAndRemotePIPStyles => ({\n modal: {\n main: {\n borderRadius: theme.effects.roundedCorner4,\n boxShadow: theme.effects.elevation8,\n // Above the message thread / people pane.\n zIndex: 2,\n ...(theme.rtl\n ? { left: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }\n : { right: _pxToRem(MODAL_PIP_DEFAULT_PX.rightPositionPx) }),\n top: _pxToRem(MODAL_PIP_DEFAULT_PX.topPositionPx)\n }\n }\n});\n\n/**\n * @private\n */\nexport const PIPContainerStyle: IStackStyles = {\n root: {\n position: 'absolute',\n width: '100%',\n height: '100%',\n pointerEvents: 'none',\n ':focus-within': {\n outline: '1px solid #00000000'\n }\n }\n};\n\n/**\n * @private\n */\nexport const hiddenStyle: IStackStyles = concatStyleSets(PIPContainerStyle, { root: { display: 'none' } });\n\n/**\n * @private\n */\nexport const modalStyle: IStyleFunctionOrObject<IModalStyleProps, IModalStyles> = {\n main: {\n minWidth: 'min-content',\n minHeight: 'min-content',\n position: 'absolute',\n overflow: 'hidden',\n // pointer events for root Modal div set to auto to make LocalAndRemotePIP interactive\n pointerEvents: 'auto',\n touchAction: 'none'\n },\n root: {\n width: '100%',\n height: '100%',\n // pointer events for root Modal div set to none to make descendants interactive\n pointerEvents: 'none',\n ':focus-within': {\n outline: '3px solid #00000000',\n outlineOffset: '-3px'\n }\n }\n};\n\n/**\n * Styles for layer host to bound the modal wrapping PiPiP in the mobile pane.\n * @private\n */\nexport const modalLayerHostStyle: IStyle = {\n display: 'flex',\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n zIndex: '100000',\n // pointer events for layerHost set to none to make descendants interactive\n pointerEvents: 'none'\n};\n\"../../../../../acs-ui-common/src\""]}
package/dist/dist-esm/react-composites/src/composites/localization/locales/en-US/strings.json CHANGED
@@ -111,6 +111,7 @@
111
111
  "captionsSettingsCloseModalButtonAriaLabel": "Close Captions Setting",
112
112
  "captionsBannerMoreButtonCallingLabel": "More",
113
113
  "captionsBannerMoreButtonTooltip": "More options",
114
+ "dismissModalAriaLabel": "Local and remote picture and picture, press enter to return to call",
114
115
  "spokenLanguageStrings": {
115
116
  "ar-ae": "Arabic - U.A.E.",
116
117
  "ar-sa": "Arabic - Saudi Arabia",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@azure/communication-react",
3
- "version": "1.9.0-alpha-202310280012",
3
+ "version": "1.9.0-alpha-202311010014",
4
4
  "sideEffects": false,
5
5
  "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
6
6
  "keywords": [