npm - @azure/communication-react - Versions diffs - 1.7.0-alpha-202308030014 → 1.7.0-alpha-202308050013 - Mend

@azure/communication-react 1.7.0-alpha-202308030014 → 1.7.0-alpha-202308050013

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

package/dist/dist-esm/react-components/src/components/styles/ImageGallery.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageGallery.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageGallery.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IIconProps, IOverlayStyles, IStyle, Theme } from '@fluentui/react';\n\n/*\n @private\n /\nexport const cancelIcon: IIconProps = { iconName: 'Cancel' };\n\n/\n @private\n /\nexport const downloadIcon: IIconProps = {\n iconName: 'Download'\n};\n\n/\n @private\n /\nexport const overlayStyles = (theme: Theme): IOverlayStyles => {\n return {\n root: {\n background: theme.palette.white,\n opacity: '0.85'\n }\n };\n};\n\n/\n @private\n /\nexport const focusTrapZoneStyle: IStyle = {\n boxShadow: 'none',\n background: 'transparent',\n display: 'flex'\n};\n\n/\n @private\n /\nexport const scrollableContentStyle: IStyle = {\n overflowY: 'hidden',\n display: 'flex',\n flexFlow: 'column wrap',\n maxWidth: '100%',\n maxHeight: '100%'\n};\n\n/\n @private\n /\nexport const headerStyle: IStyle = {\n fontSize: 'inherit',\n margin: '0',\n width: '100%',\n height: '3.5rem',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0 0.75rem'\n};\n\n/\n @private\n /\nexport const titleBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/\n @private\n /\nexport const titleStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n paddingLeft: '0.5rem',\n color: isDarkThemed ? undefined : theme.palette.white,\n fontFamily: 'inherit',\n fontSize: '0.875rem',\n fontStyle: 'normal',\n fontWeight: '600',\n lineHeight: '1.25rem'\n };\n};\n\n/\n @private\n /\nexport const controlBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/\n @private\n /\nexport const downloadIconStyle: IStyle = {\n marginRight: '0.5em',\n fontSize: '0.875rem' // 14px\n};\n\n/\n @private\n /\nexport const imageContainer: IStyle = {\n display: 'flex',\n alignItems: 'center',\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n margin: '4rem 0 2rem'\n};\n\n/\n @private\n /\nexport const imageStyle: IStyle = {\n objectFit: 'contain',\n height: '100%',\n width: '100%'\n};\n\n/\n @private\n /\nexport const closeButtonStyles = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n ':hover': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n },\n ':active': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n }\n };\n};\n\n/\n @private\n /\nexport const downloadButtonStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n margin: '0 0.5rem',\n height: '32px',\n borderWidth: '1px',\n fontSize: '0.875rem', // 14px\n fontWeight: 600,\n padding: '0.38rem 0.75rem',\n borderRadius: '4px',\n backgroundColor: isDarkThemed ? theme.palette.neutralLighterAlt : theme.palette.neutralPrimary,\n color: isDarkThemed ? undefined : theme.palette.white,\n whiteSpace: 'nowrap',\n ':hover': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n },\n ':active': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n },\n '@media (max-width: 25rem)': {\n display: 'none'\n }\n };\n};\n\n/\n @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n marginRight: '0.5rem',\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n whiteSpace: 'nowrap',\n ':hover': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n },\n ':active': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n },\n '@media (min-width: 25rem)': {\n display: 'none'\n }\n };\n};\n"]}
1	+ {"version":3,"file":"ImageGallery.style.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ImageGallery.style.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IIconProps, IOverlayStyles, IStyle, Theme } from '@fluentui/react';\n\n/*\n @private\n /\nexport const cancelIcon: IIconProps = { iconName: 'Cancel' };\n\n/\n @private\n /\nexport const downloadIcon: IIconProps = {\n iconName: 'Download'\n};\n\n/\n @private\n /\nexport const overlayStyles = (theme: Theme, isDarkThemed: boolean): IOverlayStyles => {\n return {\n root: {\n // The overlay background color should always be black in both light and dark theme.\n // In dark theme, theme.palette.white is actually black.\n background: isDarkThemed ? theme.palette.white : theme.palette.black,\n opacity: '0.85'\n }\n };\n};\n\n/\n @private\n /\nexport const focusTrapZoneStyle: IStyle = {\n boxShadow: 'none',\n background: 'transparent',\n display: 'flex'\n};\n\n/\n @private\n /\nexport const scrollableContentStyle: IStyle = {\n overflowY: 'hidden',\n display: 'flex',\n flexFlow: 'column wrap',\n maxWidth: '100%',\n maxHeight: '100%'\n};\n\n/\n @private\n /\nexport const headerStyle: IStyle = {\n fontSize: 'inherit',\n margin: '0',\n width: '100%',\n height: '3.5rem',\n flexDirection: 'row',\n justifyContent: 'space-between',\n padding: '0 0.75rem'\n};\n\n/\n @private\n /\nexport const titleBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/\n @private\n /\nexport const titleStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n paddingLeft: '0.5rem',\n marginLeft: '0.5rem',\n color: isDarkThemed ? undefined : theme.palette.white,\n fontFamily: 'inherit',\n fontSize: '0.875rem',\n fontStyle: 'normal',\n fontWeight: '600',\n lineHeight: '1.25rem'\n };\n};\n\n/\n @private\n /\nexport const controlBarContainerStyle: IStyle = {\n flexDirection: 'row',\n justifyContent: 'start',\n flexWrap: 'wrap',\n alignContent: 'center',\n alignItems: 'center'\n};\n\n/\n @private\n /\nexport const downloadIconStyle: IStyle = {\n marginRight: '0.5em',\n fontSize: '0.875rem' // 14px\n};\n\n/\n @private\n /\nexport const imageContainer: IStyle = {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n margin: '4rem 0 2rem'\n};\n\n/\n @private\n /\nexport const normalImageStyle: IStyle = {\n objectFit: 'contain',\n height: '100%',\n width: '100%'\n};\n\n/\n @private\n /\nexport const brokenImageStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n // The color should be white in dark theme.\n // In dark theme, theme.palette.black is actually white.\n color: isDarkThemed ? theme.palette.black : theme.palette.white\n };\n};\n\n/\n @private\n /\nexport const closeButtonStyles = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n // The color should be white in dark theme.\n // In dark theme, theme.palette.black is actually white.\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n ':hover': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n },\n ':active': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n }\n };\n};\n\n/\n @private\n /\nexport const downloadButtonStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n margin: '0 0.5rem',\n height: '32px',\n borderWidth: '1px',\n fontSize: '0.875rem', // 14px\n fontWeight: 600,\n padding: '0.38rem 0.75rem',\n borderRadius: '4px',\n backgroundColor: isDarkThemed ? theme.palette.neutralLighterAlt : theme.palette.neutralPrimary,\n color: isDarkThemed ? undefined : theme.palette.white,\n whiteSpace: 'nowrap',\n ':hover': {\n // The color should be white in dark theme.\n // In dark theme, theme.palette.black is actually white.\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n },\n ':active': {\n // The color should be white in dark theme.\n // In dark theme, theme.palette.black is actually white.\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n },\n '@media (max-width: 25rem)': {\n display: 'none'\n }\n };\n};\n\n/\n @private\n */\nexport const smallDownloadButtonContainerStyle = (theme: Theme, isDarkThemed: boolean): IStyle => {\n return {\n marginRight: '0.5rem',\n // The color should be white in dark theme.\n // In dark theme, theme.palette.black is actually white.\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n whiteSpace: 'nowrap',\n ':hover': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralPrimaryAlt\n },\n ':active': {\n color: isDarkThemed ? theme.palette.black : theme.palette.white,\n backgroundColor: isDarkThemed ? undefined : theme.palette.neutralDark\n },\n '@media (min-width: 25rem)': {\n display: 'none'\n }\n };\n};\n"]}

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

@@ -51,6 +51,8 @@ export const CallArrangement = (props) => {
     }, [props.mobileView]);
     const theme = useTheme();
     const callGalleryStyles = useMemo(() => galleryParentContainerStyles(theme.palette.neutralLighterAlt), [theme.palette.neutralLighterAlt]);
+    const peopleButtonRef = useRef(null);
+    const cameraButtonRef = useRef(null);
     const containerRef = useRef(null);
     const containerWidth = _useContainerWidth(containerRef);
     const containerHeight = _useContainerHeight(containerRef);
@@ -76,7 +78,8 @@ export const CallArrangement = (props) => {
             /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
             onFetchAvatarPersonaData: props.onFetchAvatarPersonaData,
             onFetchParticipantMenuItems: (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems,
-            mobileView: props.mobileView
+            mobileView: props.mobileView,
+            peopleButtonRef
         });
     }, [
         updateSidePaneRenderer,
@@ -84,7 +87,8 @@ export const CallArrangement = (props) => {
         (_a = props.callControlProps) === null || _a === void 0 ? void 0 : _a.onFetchParticipantMenuItems,
         /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */
         props.onFetchAvatarPersonaData,
-        props.mobileView
+        props.mobileView,
+        peopleButtonRef
     ]);
     const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(peoplePaneProps);
     const togglePeoplePane = useCallback(() => {
@@ -117,7 +121,7 @@ export const CallArrangement = (props) => {
     /* @conditional-compile-remove(video-background-effects) */
     const onResolveVideoEffectDependency = adapter.getState().onResolveVideoEffectDependency;
     /* @conditional-compile-remove(video-background-effects) */
-    const { openVideoEffectsPane } = useVideoEffectsPane(props.updateSidePaneRenderer, props.mobileView, props.latestErrors, props.onDismissError);
+    const { openVideoEffectsPane } = useVideoEffectsPane(props.updateSidePaneRenderer, props.mobileView, props.latestErrors, props.onDismissError, cameraButtonRef);
     const [showDrawer, setShowDrawer] = useState(false);
     const onMoreButtonClicked = useCallback(() => {
         setShowDrawer(true);
@@ -186,7 +190,7 @@ export const CallArrangement = (props) => {
                     /* @conditional-compile-remove(video-background-effects) */
                     onShowVideoEffectsPicker: onResolveVideoEffectDependency ? openVideoEffectsPane : undefined,
                     /* @conditional-compile-remove(PSTN-calls) */
-                    onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, displayVertical: verticalControlBar }))))),
+                    onClickShowDialpad: alternateCallerId ? onClickShowDialpad : undefined, displayVertical: verticalControlBar, peopleButtonRef: peopleButtonRef, cameraButtonRef: cameraButtonRef }))))),
                 ((_e = props.callControlProps) === null || _e === void 0 ? void 0 : _e.options) !== false && showDrawer && (React.createElement(Stack, { styles: drawerContainerStylesValue },
                     React.createElement(PreparedMoreDrawer, { callControls: props.callControlProps.options, onLightDismiss: closeDrawer, onPeopleButtonClicked: onMoreDrawerPeopleClicked,
                         /* @conditional-compile-remove(PSTN-calls) */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CallArrangement.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallArrangement.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { _isInCall, _isInLobbyOrConnecting } from '@internal/calling-component-bindings';\nimport {\n _ComplianceBanner,\n _ComplianceBannerProps,\n _DrawerMenu,\n _DrawerMenuItemProps,\n _useContainerHeight,\n _useContainerWidth,\n ActiveErrorMessage,\n ErrorBar,\n ErrorBarProps,\n useTheme\n} from '@internal/react-components';\nimport React, { useMemo, useRef, useState } from 'react';\n/* @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { useEffect } from 'react';\nimport { useCallback } from 'react';\n/ @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\n/ @conditional-compile-remove(close-captions) /\nimport { CaptionsBanner } from '../../common/CaptionsBanner';\nimport { containerDivStyles } from '../../common/ContainerRectProps';\nimport { compositeMinWidthRem } from '../../common/styles/Composite.styles';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { CallControls, CallControlsProps } from '../components/CallControls';\nimport { CommonCallControlBar } from '../../common/ControlBar/CommonCallControlBar';\nimport {\n callArrangementContainerStyles,\n notificationsContainerStyles,\n containerStyleDesktop,\n containerStyleMobile,\n mediaGalleryContainerStyles,\n galleryParentContainerStyles,\n bannerNotificationStyles,\n CONTROL_BAR_Z_INDEX,\n DRAWER_Z_INDEX\n} from '../styles/CallPage.styles';\nimport { MutedNotification, MutedNotificationProps } from './MutedNotification';\nimport { CallAdapter } from '../adapter';\nimport { useSelector } from '../hooks/useSelector';\nimport { callStatusSelector } from '../selectors/callStatusSelector';\nimport { _CallControlOptions, CallControlOptions } from '../types/CallControlOptions';\nimport { PreparedMoreDrawer } from '../../common/Drawer/PreparedMoreDrawer';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { SendDtmfDialpad } from '../../common/SendDtmfDialpad';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';\n/ @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { getPage } from '../selectors/baseSelectors';\n/ @conditional-compile-remove(close-captions) /\nimport { getCallStatus, getIsTeamsCall } from '../selectors/baseSelectors';\nimport { drawerContainerStyles } from '../styles/CallComposite.styles';\nimport { SidePane } from './SidePane/SidePane';\nimport { usePeoplePane } from './SidePane/usePeoplePane';\n/ @conditional-compile-remove(video-background-effects) /\nimport {\n useVideoEffectsPane,\n VIDEO_EFFECTS_SIDE_PANE_ID,\n VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM\n} from './SidePane/useVideoEffectsPane';\nimport { isDisabled } from '../utils';\nimport { SidePaneRenderer, useIsSidePaneOpen } from './SidePane/SidePaneProvider';\n/ @conditional-compile-remove(video-background-effects) /\nimport { useIsParticularSidePaneOpen } from './SidePane/SidePaneProvider';\nimport { ModalLocalAndRemotePIP } from '../../common/ModalLocalAndRemotePIP';\nimport { getPipStyles } from '../../common/styles/ModalLocalAndRemotePIP.styles';\nimport { useMinMaxDragPosition } from '../../common/utils';\nimport { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';\nimport { CommonCallControlOptions } from '../../common/types/CommonCallControlOptions';\n/ @conditional-compile-remove(video-background-effects) /\nimport { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';\n\n/\n @private\n /\nexport interface CallArrangementProps {\n id?: string;\n complianceBannerProps: _ComplianceBannerProps;\n errorBarProps: ErrorBarProps \| false;\n mutedNotificationProps?: MutedNotificationProps;\n callControlProps: CallControlsProps;\n onRenderGalleryContent: () => JSX.Element;\n dataUiId: string;\n mobileView: boolean;\n modalLayerHostId: string;\n / @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n updateSidePaneRenderer: (renderer: SidePaneRenderer \| undefined) => void;\n mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n latestErrors: ActiveErrorMessage[];\n onDismissError: (error: ActiveErrorMessage) => void;\n}\n\n/\n @private\n /\nexport const CallArrangement = (props: CallArrangementProps): JSX.Element => {\n const containerClassName = useMemo(() => {\n return props.mobileView ? containerStyleMobile : containerStyleDesktop;\n }, [props.mobileView]);\n\n const theme = useTheme();\n const callGalleryStyles = useMemo(\n () => galleryParentContainerStyles(theme.palette.neutralLighterAlt),\n [theme.palette.neutralLighterAlt]\n );\n\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n const containerHeight = _useContainerHeight(containerRef);\n\n const isInLobby = _isInLobbyOrConnecting(useSelector(callStatusSelector).callStatus);\n\n const { updateSidePaneRenderer } = props;\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const isInLocalHold = useSelector(getPage) === 'hold';\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n useEffect(() => {\n if (isInLocalHold) {\n // close side pane on local hold\n updateSidePaneRenderer(undefined);\n }\n }, [updateSidePaneRenderer, isInLocalHold]);\n\n const adapter = useAdapter();\n\n const [drawerMenuItems, setDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n const peoplePaneProps = useMemo(\n () => ({\n updateSidePaneRenderer,\n setDrawerMenuItems,\n inviteLink: props.callControlProps.callInvitationURL,\n / @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\n onFetchAvatarPersonaData: props.onFetchAvatarPersonaData,\n onFetchParticipantMenuItems: props.callControlProps?.onFetchParticipantMenuItems,\n mobileView: props.mobileView\n }),\n [\n updateSidePaneRenderer,\n props.callControlProps.callInvitationURL,\n props.callControlProps?.onFetchParticipantMenuItems,\n / @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\n props.onFetchAvatarPersonaData,\n props.mobileView\n ]\n );\n const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(peoplePaneProps);\n const togglePeoplePane = useCallback(() => {\n if (isPeoplePaneOpen) {\n closePeoplePane();\n } else {\n openPeoplePane();\n }\n }, [closePeoplePane, isPeoplePaneOpen, openPeoplePane]);\n\n const isSidePaneOpen = useIsSidePaneOpen();\n\n const isMobileWithActivePane = props.mobileView && isSidePaneOpen;\n\n const callCompositeContainerCSS = useMemo((): React.CSSProperties => {\n return {\n display: isMobileWithActivePane ? 'none' : 'flex',\n minWidth: props.mobileView ? 'unset' : `${compositeMinWidthRem}rem`,\n width: '100%',\n height: '100%',\n position: 'relative'\n };\n }, [isMobileWithActivePane, props.mobileView]);\n\n / @conditional-compile-remove(PSTN-calls) /\n const callWithChatStrings = useCallWithChatCompositeStrings();\n\n / @conditional-compile-remove(PSTN-calls) /\n const dialpadStrings = useMemo(\n () => ({\n dialpadModalAriaLabel: callWithChatStrings.dialpadModalAriaLabel,\n dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,\n placeholderText: callWithChatStrings.dtmfDialpadPlaceholderText\n }),\n [callWithChatStrings]\n );\n\n / @conditional-compile-remove(video-background-effects) /\n const onResolveVideoEffectDependency = adapter.getState().onResolveVideoEffectDependency;\n\n / @conditional-compile-remove(video-background-effects) /\n const { openVideoEffectsPane } = useVideoEffectsPane(\n props.updateSidePaneRenderer,\n props.mobileView,\n props.latestErrors,\n props.onDismissError\n );\n const [showDrawer, setShowDrawer] = useState(false);\n const onMoreButtonClicked = useCallback(() => {\n setShowDrawer(true);\n }, []);\n const closeDrawer = useCallback(() => {\n setShowDrawer(false);\n }, []);\n const onMoreDrawerPeopleClicked = useCallback(() => {\n setShowDrawer(false);\n togglePeoplePane();\n }, [togglePeoplePane]);\n\n / @conditional-compile-remove(PSTN-calls) /\n const alternateCallerId = useAdapter().getState().alternateCallerId;\n\n / @conditional-compile-remove(PSTN-calls) /\n const [showDtmfDialpad, setShowDtmfDialpad] = useState(false);\n\n / @conditional-compile-remove(PSTN-calls) /\n const onDismissDtmfDialpad = (): void => {\n setShowDtmfDialpad(false);\n };\n\n / @conditional-compile-remove(PSTN-calls) /\n const onClickShowDialpad = (): void => {\n setShowDtmfDialpad(true);\n };\n\n const drawerContainerStylesValue = useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);\n\n / @conditional-compile-remove(rooms) /\n const role = adapter.getState().call?.role;\n\n let canUnmute = true;\n / @conditional-compile-remove(rooms) /\n canUnmute = role !== 'Consumer' ? true : false;\n\n let filteredLatestErrors: ActiveErrorMessage[] = props.errorBarProps !== false ? props.latestErrors : [];\n\n / @conditional-compile-remove(video-background-effects) /\n const isCameraOn = useSelector(localVideoSelector).isAvailable;\n\n / @conditional-compile-remove(rooms) /\n // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK\n if (role === 'Consumer' && props.errorBarProps) {\n filteredLatestErrors = filteredLatestErrors.filter(\n (e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari'\n );\n }\n\n / @conditional-compile-remove(video-background-effects) /\n const isVideoPaneOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);\n / @conditional-compile-remove(video-background-effects) /\n if ((isVideoPaneOpen \|\| !isCameraOn) && props.errorBarProps) {\n filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'unableToStartVideoEffect');\n }\n\n / @conditional-compile-remove(close-captions) /\n const isTeamsCall = useSelector(getIsTeamsCall);\n / @conditional-compile-remove(close-captions) /\n const hasJoinedCall = useSelector(getCallStatus) === 'Connected';\n const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);\n const pipStyles = useMemo(() => getPipStyles(theme), [theme]);\n\n const verticalControlBar =\n props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;\n\n return (\n <div ref={containerRef} className={mergeStyles(containerDivStyles)} id={props.id}>\n <Stack verticalFill horizontalAlign=\"stretch\" className={containerClassName} data-ui-id={props.dataUiId}>\n <Stack\n reversed\n horizontal={verticalControlBar}\n grow\n styles={callArrangementContainerStyles(verticalControlBar)}\n >\n {props.callControlProps?.options !== false && !isMobileWithActivePane && (\n <Stack\n verticalAlign={'center'}\n className={mergeStyles({\n zIndex: CONTROL_BAR_Z_INDEX,\n padding: verticalControlBar ? '0.25rem' : 'unset'\n })}\n >\n {isLegacyCallControlEnabled(props.callControlProps?.options) ? (\n <CallControls\n {...props.callControlProps}\n containerWidth={containerWidth}\n containerHeight={containerHeight}\n isMobile={props.mobileView}\n / @conditional-compile-remove(one-to-n-calling) /\n peopleButtonChecked={isPeoplePaneOpen}\n / @conditional-compile-remove(one-to-n-calling) /\n onPeopleButtonClicked={togglePeoplePane}\n displayVertical={verticalControlBar}\n />\n ) : (\n <CommonCallControlBar\n {...props.callControlProps}\n callControls={props.callControlProps.options}\n callAdapter={adapter as CallAdapter}\n mobileView={props.mobileView}\n disableButtonsForLobbyPage={isInLobby}\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n disableButtonsForHoldScreen={isInLocalHold}\n peopleButtonChecked={isPeoplePaneOpen}\n onPeopleButtonClicked={togglePeoplePane}\n onMoreButtonClicked={onMoreButtonClicked}\n / @conditional-compile-remove(close-captions) /\n isCaptionsSupported={isTeamsCall && hasJoinedCall}\n / @conditional-compile-remove(video-background-effects) /\n onShowVideoEffectsPicker={onResolveVideoEffectDependency ? openVideoEffectsPane : undefined}\n / @conditional-compile-remove(PSTN-calls) /\n onClickShowDialpad={alternateCallerId ? onClickShowDialpad : undefined}\n displayVertical={verticalControlBar}\n />\n )}\n </Stack>\n )}\n {props.callControlProps?.options !== false && showDrawer && (\n <Stack styles={drawerContainerStylesValue}>\n <PreparedMoreDrawer\n callControls={props.callControlProps.options}\n onLightDismiss={closeDrawer}\n onPeopleButtonClicked={onMoreDrawerPeopleClicked}\n / @conditional-compile-remove(PSTN-calls) /\n onClickShowDialpad={alternateCallerId ? onClickShowDialpad : undefined}\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n disableButtonsForHoldScreen={isInLocalHold}\n / @conditional-compile-remove(close-captions) /\n isCaptionsSupported={isTeamsCall && hasJoinedCall}\n />\n </Stack>\n )}\n\n {\n / @conditional-compile-remove(PSTN-calls) /\n props.callControlProps?.options !== false && showDtmfDialpad && (\n <Stack styles={drawerContainerStylesValue}>\n <SendDtmfDialpad\n isMobile={props.mobileView}\n strings={dialpadStrings}\n showDialpad={showDtmfDialpad}\n onDismissDialpad={onDismissDtmfDialpad}\n />\n </Stack>\n )\n }\n <Stack horizontal grow>\n <Stack.Item style={callCompositeContainerCSS}>\n <Stack.Item styles={callGalleryStyles} grow>\n <Stack verticalFill styles={mediaGalleryContainerStyles}>\n <Stack.Item styles={notificationsContainerStyles}>\n <Stack styles={bannerNotificationStyles}>\n <_ComplianceBanner {...props.complianceBannerProps} />\n </Stack>\n {props.errorBarProps !== false && (\n <Stack styles={bannerNotificationStyles}>\n <ErrorBar\n {...props.errorBarProps}\n onDismissError={props.onDismissError}\n activeErrorMessages={filteredLatestErrors}\n />\n </Stack>\n )}\n {canUnmute && !!props.mutedNotificationProps && (\n <MutedNotification {...props.mutedNotificationProps} />\n )}\n </Stack.Item>\n {props.onRenderGalleryContent && props.onRenderGalleryContent()}\n {\n / @conditional-compile-remove(close-captions) /\n true &&\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / !isInLocalHold && (\n <CaptionsBanner isMobile={props.mobileView} />\n )\n }\n </Stack>\n </Stack.Item>\n </Stack.Item>\n <SidePane\n mobileView={props.mobileView}\n / @conditional-compile-remove(video-background-effects) /\n maxWidth={isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined}\n updateSidePaneRenderer={props.updateSidePaneRenderer}\n onPeopleButtonClicked={\n props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)\n ? undefined\n : togglePeoplePane\n }\n disablePeopleButton={\n typeof props.callControlProps.options !== 'boolean' &&\n isDisabled(props.callControlProps.options?.participantsButton)\n }\n onChatButtonClicked={props.mobileChatTabHeader?.onClick}\n disableChatButton={props.mobileChatTabHeader?.disabled}\n />\n {props.mobileView && (\n <ModalLocalAndRemotePIP\n modalLayerHostId={props.modalLayerHostId}\n hidden={!isSidePaneOpen}\n styles={pipStyles}\n minDragPosition={minMaxDragPosition.minDragPosition}\n maxDragPosition={minMaxDragPosition.maxDragPosition}\n />\n )}\n {drawerMenuItems.length > 0 && (\n <Stack styles={drawerContainerStyles()}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItems([])} items={drawerMenuItems} />\n </Stack>\n )}\n </Stack>\n </Stack>\n </Stack>\n </div>\n );\n};\n\nconst isLegacyCallControlEnabled = (options?: boolean \| CallControlOptions): boolean => {\n / @conditional-compile-remove(new-call-control-bar) */\n return !!options && options !== true && (options as _CallControlOptions)?.legacyControlBarExperience === true;\n\n // In stable builds, we default to legacy until new-call-control-bar feature is stablized.\n return (\n options === undefined \|\| options === true \|\| (options as _CallControlOptions)?.legacyControlBarExperience !== false\n );\n};\n\nconst shouldShowPeopleTabHeaderButton = (callControls?: boolean \| CommonCallControlOptions): boolean => {\n if (callControls === undefined \|\| callControls === true) {\n return true;\n }\n if (callControls === false) {\n return false;\n }\n return callControls.participantsButton !== false && callControls.peopleButton !== false;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}
1	+ {"version":3,"file":"CallArrangement.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CallArrangement.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IButton, mergeStyles, Stack } from '@fluentui/react';\nimport { _isInCall, _isInLobbyOrConnecting } from '@internal/calling-component-bindings';\nimport {\n _ComplianceBanner,\n _ComplianceBannerProps,\n _DrawerMenu,\n _DrawerMenuItemProps,\n _useContainerHeight,\n _useContainerWidth,\n ActiveErrorMessage,\n ErrorBar,\n ErrorBarProps,\n useTheme\n} from '@internal/react-components';\nimport React, { useMemo, useRef, useState } from 'react';\n/* @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { useEffect } from 'react';\nimport { useCallback } from 'react';\n/ @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\nimport { AvatarPersonaDataCallback } from '../../common/AvatarPersona';\n/ @conditional-compile-remove(close-captions) /\nimport { CaptionsBanner } from '../../common/CaptionsBanner';\nimport { containerDivStyles } from '../../common/ContainerRectProps';\nimport { compositeMinWidthRem } from '../../common/styles/Composite.styles';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { CallControls, CallControlsProps } from '../components/CallControls';\nimport { CommonCallControlBar } from '../../common/ControlBar/CommonCallControlBar';\nimport {\n callArrangementContainerStyles,\n notificationsContainerStyles,\n containerStyleDesktop,\n containerStyleMobile,\n mediaGalleryContainerStyles,\n galleryParentContainerStyles,\n bannerNotificationStyles,\n CONTROL_BAR_Z_INDEX,\n DRAWER_Z_INDEX\n} from '../styles/CallPage.styles';\nimport { MutedNotification, MutedNotificationProps } from './MutedNotification';\nimport { CallAdapter } from '../adapter';\nimport { useSelector } from '../hooks/useSelector';\nimport { callStatusSelector } from '../selectors/callStatusSelector';\nimport { _CallControlOptions, CallControlOptions } from '../types/CallControlOptions';\nimport { PreparedMoreDrawer } from '../../common/Drawer/PreparedMoreDrawer';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { SendDtmfDialpad } from '../../common/SendDtmfDialpad';\n/ @conditional-compile-remove(PSTN-calls) /\nimport { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';\n/ @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\nimport { getPage } from '../selectors/baseSelectors';\n/ @conditional-compile-remove(close-captions) /\nimport { getCallStatus, getIsTeamsCall } from '../selectors/baseSelectors';\nimport { drawerContainerStyles } from '../styles/CallComposite.styles';\nimport { SidePane } from './SidePane/SidePane';\nimport { usePeoplePane } from './SidePane/usePeoplePane';\n/ @conditional-compile-remove(video-background-effects) /\nimport {\n useVideoEffectsPane,\n VIDEO_EFFECTS_SIDE_PANE_ID,\n VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM\n} from './SidePane/useVideoEffectsPane';\nimport { isDisabled } from '../utils';\nimport { SidePaneRenderer, useIsSidePaneOpen } from './SidePane/SidePaneProvider';\n/ @conditional-compile-remove(video-background-effects) /\nimport { useIsParticularSidePaneOpen } from './SidePane/SidePaneProvider';\nimport { ModalLocalAndRemotePIP } from '../../common/ModalLocalAndRemotePIP';\nimport { getPipStyles } from '../../common/styles/ModalLocalAndRemotePIP.styles';\nimport { useMinMaxDragPosition } from '../../common/utils';\nimport { MobileChatSidePaneTabHeaderProps } from '../../common/TabHeader';\nimport { CommonCallControlOptions } from '../../common/types/CommonCallControlOptions';\n/ @conditional-compile-remove(video-background-effects) /\nimport { localVideoSelector } from '../../CallComposite/selectors/localVideoStreamSelector';\n\n/\n @private\n /\nexport interface CallArrangementProps {\n id?: string;\n complianceBannerProps: _ComplianceBannerProps;\n errorBarProps: ErrorBarProps \| false;\n mutedNotificationProps?: MutedNotificationProps;\n callControlProps: CallControlsProps;\n onRenderGalleryContent: () => JSX.Element;\n dataUiId: string;\n mobileView: boolean;\n modalLayerHostId: string;\n / @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n updateSidePaneRenderer: (renderer: SidePaneRenderer \| undefined) => void;\n mobileChatTabHeader?: MobileChatSidePaneTabHeaderProps;\n latestErrors: ActiveErrorMessage[];\n onDismissError: (error: ActiveErrorMessage) => void;\n}\n\n/\n @private\n /\nexport const CallArrangement = (props: CallArrangementProps): JSX.Element => {\n const containerClassName = useMemo(() => {\n return props.mobileView ? containerStyleMobile : containerStyleDesktop;\n }, [props.mobileView]);\n\n const theme = useTheme();\n const callGalleryStyles = useMemo(\n () => galleryParentContainerStyles(theme.palette.neutralLighterAlt),\n [theme.palette.neutralLighterAlt]\n );\n\n const peopleButtonRef = useRef<IButton>(null);\n const cameraButtonRef = useRef<IButton>(null);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const containerWidth = _useContainerWidth(containerRef);\n const containerHeight = _useContainerHeight(containerRef);\n\n const isInLobby = _isInLobbyOrConnecting(useSelector(callStatusSelector).callStatus);\n\n const { updateSidePaneRenderer } = props;\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n const isInLocalHold = useSelector(getPage) === 'hold';\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n useEffect(() => {\n if (isInLocalHold) {\n // close side pane on local hold\n updateSidePaneRenderer(undefined);\n }\n }, [updateSidePaneRenderer, isInLocalHold]);\n\n const adapter = useAdapter();\n\n const [drawerMenuItems, setDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n const peoplePaneProps = useMemo(\n () => ({\n updateSidePaneRenderer,\n setDrawerMenuItems,\n inviteLink: props.callControlProps.callInvitationURL,\n / @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\n onFetchAvatarPersonaData: props.onFetchAvatarPersonaData,\n onFetchParticipantMenuItems: props.callControlProps?.onFetchParticipantMenuItems,\n mobileView: props.mobileView,\n peopleButtonRef\n }),\n [\n updateSidePaneRenderer,\n props.callControlProps.callInvitationURL,\n props.callControlProps?.onFetchParticipantMenuItems,\n / @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) /\n props.onFetchAvatarPersonaData,\n props.mobileView,\n peopleButtonRef\n ]\n );\n const { isPeoplePaneOpen, openPeoplePane, closePeoplePane } = usePeoplePane(peoplePaneProps);\n const togglePeoplePane = useCallback(() => {\n if (isPeoplePaneOpen) {\n closePeoplePane();\n } else {\n openPeoplePane();\n }\n }, [closePeoplePane, isPeoplePaneOpen, openPeoplePane]);\n\n const isSidePaneOpen = useIsSidePaneOpen();\n\n const isMobileWithActivePane = props.mobileView && isSidePaneOpen;\n\n const callCompositeContainerCSS = useMemo((): React.CSSProperties => {\n return {\n display: isMobileWithActivePane ? 'none' : 'flex',\n minWidth: props.mobileView ? 'unset' : `${compositeMinWidthRem}rem`,\n width: '100%',\n height: '100%',\n position: 'relative'\n };\n }, [isMobileWithActivePane, props.mobileView]);\n\n / @conditional-compile-remove(PSTN-calls) /\n const callWithChatStrings = useCallWithChatCompositeStrings();\n\n / @conditional-compile-remove(PSTN-calls) /\n const dialpadStrings = useMemo(\n () => ({\n dialpadModalAriaLabel: callWithChatStrings.dialpadModalAriaLabel,\n dialpadCloseModalButtonAriaLabel: callWithChatStrings.dialpadCloseModalButtonAriaLabel,\n placeholderText: callWithChatStrings.dtmfDialpadPlaceholderText\n }),\n [callWithChatStrings]\n );\n\n / @conditional-compile-remove(video-background-effects) /\n const onResolveVideoEffectDependency = adapter.getState().onResolveVideoEffectDependency;\n\n / @conditional-compile-remove(video-background-effects) /\n const { openVideoEffectsPane } = useVideoEffectsPane(\n props.updateSidePaneRenderer,\n props.mobileView,\n props.latestErrors,\n props.onDismissError,\n cameraButtonRef\n );\n const [showDrawer, setShowDrawer] = useState(false);\n const onMoreButtonClicked = useCallback(() => {\n setShowDrawer(true);\n }, []);\n const closeDrawer = useCallback(() => {\n setShowDrawer(false);\n }, []);\n const onMoreDrawerPeopleClicked = useCallback(() => {\n setShowDrawer(false);\n togglePeoplePane();\n }, [togglePeoplePane]);\n\n / @conditional-compile-remove(PSTN-calls) /\n const alternateCallerId = useAdapter().getState().alternateCallerId;\n\n / @conditional-compile-remove(PSTN-calls) /\n const [showDtmfDialpad, setShowDtmfDialpad] = useState(false);\n\n / @conditional-compile-remove(PSTN-calls) /\n const onDismissDtmfDialpad = (): void => {\n setShowDtmfDialpad(false);\n };\n\n / @conditional-compile-remove(PSTN-calls) /\n const onClickShowDialpad = (): void => {\n setShowDtmfDialpad(true);\n };\n\n const drawerContainerStylesValue = useMemo(() => drawerContainerStyles(DRAWER_Z_INDEX), []);\n\n / @conditional-compile-remove(rooms) /\n const role = adapter.getState().call?.role;\n\n let canUnmute = true;\n / @conditional-compile-remove(rooms) /\n canUnmute = role !== 'Consumer' ? true : false;\n\n let filteredLatestErrors: ActiveErrorMessage[] = props.errorBarProps !== false ? props.latestErrors : [];\n\n / @conditional-compile-remove(video-background-effects) /\n const isCameraOn = useSelector(localVideoSelector).isAvailable;\n\n / @conditional-compile-remove(rooms) /\n // TODO: move this logic to the error bar selector once role is plumbed from the headless SDK\n if (role === 'Consumer' && props.errorBarProps) {\n filteredLatestErrors = filteredLatestErrors.filter(\n (e) => e.type !== 'callCameraAccessDenied' && e.type !== 'callCameraAccessDeniedSafari'\n );\n }\n\n / @conditional-compile-remove(video-background-effects) /\n const isVideoPaneOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);\n / @conditional-compile-remove(video-background-effects) /\n if ((isVideoPaneOpen \|\| !isCameraOn) && props.errorBarProps) {\n filteredLatestErrors = filteredLatestErrors.filter((e) => e.type !== 'unableToStartVideoEffect');\n }\n\n / @conditional-compile-remove(close-captions) /\n const isTeamsCall = useSelector(getIsTeamsCall);\n / @conditional-compile-remove(close-captions) /\n const hasJoinedCall = useSelector(getCallStatus) === 'Connected';\n const minMaxDragPosition = useMinMaxDragPosition(props.modalLayerHostId);\n const pipStyles = useMemo(() => getPipStyles(theme), [theme]);\n\n const verticalControlBar =\n props.mobileView && containerWidth && containerHeight && containerWidth / containerHeight > 1 ? true : false;\n\n return (\n <div ref={containerRef} className={mergeStyles(containerDivStyles)} id={props.id}>\n <Stack verticalFill horizontalAlign=\"stretch\" className={containerClassName} data-ui-id={props.dataUiId}>\n <Stack\n reversed\n horizontal={verticalControlBar}\n grow\n styles={callArrangementContainerStyles(verticalControlBar)}\n >\n {props.callControlProps?.options !== false && !isMobileWithActivePane && (\n <Stack\n verticalAlign={'center'}\n className={mergeStyles({\n zIndex: CONTROL_BAR_Z_INDEX,\n padding: verticalControlBar ? '0.25rem' : 'unset'\n })}\n >\n {isLegacyCallControlEnabled(props.callControlProps?.options) ? (\n <CallControls\n {...props.callControlProps}\n containerWidth={containerWidth}\n containerHeight={containerHeight}\n isMobile={props.mobileView}\n / @conditional-compile-remove(one-to-n-calling) /\n peopleButtonChecked={isPeoplePaneOpen}\n / @conditional-compile-remove(one-to-n-calling) /\n onPeopleButtonClicked={togglePeoplePane}\n displayVertical={verticalControlBar}\n />\n ) : (\n <CommonCallControlBar\n {...props.callControlProps}\n callControls={props.callControlProps.options}\n callAdapter={adapter as CallAdapter}\n mobileView={props.mobileView}\n disableButtonsForLobbyPage={isInLobby}\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n disableButtonsForHoldScreen={isInLocalHold}\n peopleButtonChecked={isPeoplePaneOpen}\n onPeopleButtonClicked={togglePeoplePane}\n onMoreButtonClicked={onMoreButtonClicked}\n / @conditional-compile-remove(close-captions) /\n isCaptionsSupported={isTeamsCall && hasJoinedCall}\n / @conditional-compile-remove(video-background-effects) /\n onShowVideoEffectsPicker={onResolveVideoEffectDependency ? openVideoEffectsPane : undefined}\n / @conditional-compile-remove(PSTN-calls) /\n onClickShowDialpad={alternateCallerId ? onClickShowDialpad : undefined}\n displayVertical={verticalControlBar}\n peopleButtonRef={peopleButtonRef}\n cameraButtonRef={cameraButtonRef}\n />\n )}\n </Stack>\n )}\n {props.callControlProps?.options !== false && showDrawer && (\n <Stack styles={drawerContainerStylesValue}>\n <PreparedMoreDrawer\n callControls={props.callControlProps.options}\n onLightDismiss={closeDrawer}\n onPeopleButtonClicked={onMoreDrawerPeopleClicked}\n / @conditional-compile-remove(PSTN-calls) /\n onClickShowDialpad={alternateCallerId ? onClickShowDialpad : undefined}\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) /\n disableButtonsForHoldScreen={isInLocalHold}\n / @conditional-compile-remove(close-captions) /\n isCaptionsSupported={isTeamsCall && hasJoinedCall}\n />\n </Stack>\n )}\n\n {\n / @conditional-compile-remove(PSTN-calls) /\n props.callControlProps?.options !== false && showDtmfDialpad && (\n <Stack styles={drawerContainerStylesValue}>\n <SendDtmfDialpad\n isMobile={props.mobileView}\n strings={dialpadStrings}\n showDialpad={showDtmfDialpad}\n onDismissDialpad={onDismissDtmfDialpad}\n />\n </Stack>\n )\n }\n <Stack horizontal grow>\n <Stack.Item style={callCompositeContainerCSS}>\n <Stack.Item styles={callGalleryStyles} grow>\n <Stack verticalFill styles={mediaGalleryContainerStyles}>\n <Stack.Item styles={notificationsContainerStyles}>\n <Stack styles={bannerNotificationStyles}>\n <_ComplianceBanner {...props.complianceBannerProps} />\n </Stack>\n {props.errorBarProps !== false && (\n <Stack styles={bannerNotificationStyles}>\n <ErrorBar\n {...props.errorBarProps}\n onDismissError={props.onDismissError}\n activeErrorMessages={filteredLatestErrors}\n />\n </Stack>\n )}\n {canUnmute && !!props.mutedNotificationProps && (\n <MutedNotification {...props.mutedNotificationProps} />\n )}\n </Stack.Item>\n {props.onRenderGalleryContent && props.onRenderGalleryContent()}\n {\n / @conditional-compile-remove(close-captions) /\n true &&\n / @conditional-compile-remove(PSTN-calls) / / @conditional-compile-remove(one-to-n-calling) / !isInLocalHold && (\n <CaptionsBanner isMobile={props.mobileView} />\n )\n }\n </Stack>\n </Stack.Item>\n </Stack.Item>\n <SidePane\n mobileView={props.mobileView}\n / @conditional-compile-remove(video-background-effects) /\n maxWidth={isVideoPaneOpen ? `${VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM}rem` : undefined}\n updateSidePaneRenderer={props.updateSidePaneRenderer}\n onPeopleButtonClicked={\n props.mobileView && !shouldShowPeopleTabHeaderButton(props.callControlProps.options)\n ? undefined\n : togglePeoplePane\n }\n disablePeopleButton={\n typeof props.callControlProps.options !== 'boolean' &&\n isDisabled(props.callControlProps.options?.participantsButton)\n }\n onChatButtonClicked={props.mobileChatTabHeader?.onClick}\n disableChatButton={props.mobileChatTabHeader?.disabled}\n />\n {props.mobileView && (\n <ModalLocalAndRemotePIP\n modalLayerHostId={props.modalLayerHostId}\n hidden={!isSidePaneOpen}\n styles={pipStyles}\n minDragPosition={minMaxDragPosition.minDragPosition}\n maxDragPosition={minMaxDragPosition.maxDragPosition}\n />\n )}\n {drawerMenuItems.length > 0 && (\n <Stack styles={drawerContainerStyles()}>\n <_DrawerMenu onLightDismiss={() => setDrawerMenuItems([])} items={drawerMenuItems} />\n </Stack>\n )}\n </Stack>\n </Stack>\n </Stack>\n </div>\n );\n};\n\nconst isLegacyCallControlEnabled = (options?: boolean \| CallControlOptions): boolean => {\n / @conditional-compile-remove(new-call-control-bar) */\n return !!options && options !== true && (options as _CallControlOptions)?.legacyControlBarExperience === true;\n\n // In stable builds, we default to legacy until new-call-control-bar feature is stablized.\n return (\n options === undefined \|\| options === true \|\| (options as _CallControlOptions)?.legacyControlBarExperience !== false\n );\n};\n\nconst shouldShowPeopleTabHeaderButton = (callControls?: boolean \| CommonCallControlOptions): boolean => {\n if (callControls === undefined \|\| callControls === true) {\n return true;\n }\n if (callControls === false) {\n return false;\n }\n return callControls.participantsButton !== false && callControls.peopleButton !== false;\n};\n\"../../../../../calling-component-bindings/src\"\"../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
+import React, { RefObject } from 'react';
 import { SidePaneRenderer } from './SidePaneProvider';
 import { ParticipantMenuItemsCallback, _DrawerMenuItemProps } from "../../../../../../react-components/src";
 import { AvatarPersonaDataCallback } from '../../../common/AvatarPersona';
+import { IButton } from '@fluentui/react';
 /** @private */
 export declare const usePeoplePane: (props: {
     updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void;
@@ -9,6 +11,7 @@ export declare const usePeoplePane: (props: {
     onFetchAvatarPersonaData?: AvatarPersonaDataCallback | undefined;
     onFetchParticipantMenuItems?: ParticipantMenuItemsCallback | undefined;
     mobileView?: boolean | undefined;
+    peopleButtonRef?: React.RefObject<IButton> | undefined;
 }) => {
     openPeoplePane: () => void;
     closePeoplePane: () => void;

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

@@ -8,10 +8,12 @@ import { useLocale } from '../../../localization';
 const PEOPLE_SIDE_PANE_ID = 'people';
 /** @private */
 export const usePeoplePane = (props) => {
-    const { updateSidePaneRenderer, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems, mobileView } = props;
+    const { updateSidePaneRenderer, inviteLink, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems, mobileView, peopleButtonRef } = props;
     const closePane = useCallback(() => {
+        var _a;
         updateSidePaneRenderer(undefined);
-    }, [updateSidePaneRenderer]);
+        (_a = peopleButtonRef === null || peopleButtonRef === void 0 ? void 0 : peopleButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [peopleButtonRef, updateSidePaneRenderer]);
     const localeStrings = localeTrampoline(useLocale());
     const onRenderHeader = useCallback(() => (React.createElement(SidePaneHeader, { onClose: closePane, headingText: localeStrings.peoplePaneTitle, dismissSidePaneButtonAriaLabel: localeStrings.dismissSidePaneButtonLabel, mobileView: mobileView !== null && mobileView !== void 0 ? mobileView : false })), [mobileView, closePane, localeStrings]);
     const onRenderContent = useCallback(() => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"usePeoplePane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,~~EAAE~~,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;~~AAC/D~~,OAAO,EAAoB,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAmB,SAAS,EAAE,MAAM,uBAAuB,CAAC;~~AAInE~~,MAAM,mBAAmB,GAAG,QAAQ,CAAC;AAErC,eAAe;AACf,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,~~KAO7B~~,EAIC,EAAE;IACF,MAAM,EACJ,sBAAsB,EACtB,UAAU,EACV,wBAAwB,EACxB,2BAA2B,EAC3B,kBAAkB,EAClB,UAAU,~~EACX~~,GAAG,KAAK,CAAC;IAEV,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,SAAS,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;~~IAE7B~~,MAAM,aAAa,GAAG,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC;IAEpD,MAAM,cAAc,GAAG,WAAW,CAChC,GAAG,EAAE,CAAC,CACJ,oBAAC,cAAc,IACb,OAAO,EAAE,SAAS,EAClB,WAAW,EAAE,aAAa,CAAC,eAAe,EAC1C,8BAA8B,EAAE,aAAa,CAAC,0BAA0B,EACxE,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,KAAK,GAC/B,CACH,EACD,CAAC,UAAU,EAAE,SAAS,EAAE,aAAa,CAAC,CACvC,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CAAC,GAAgB,EAAE;QACpD,OAAO,CACL,oBAAC,iBAAiB,IAChB,UAAU,EAAE,UAAU,EACtB,wBAAwB,EAAE,wBAAwB,EAClD,2BAA2B,EAAE,2BAA2B,EACxD,kBAAkB,EAAE,kBAAkB,EACtC,UAAU,EAAE,UAAU,GACtB,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,wBAAwB,EAAE,2BAA2B,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAExG,MAAM,gBAAgB,GAAqB,OAAO,CAChD,GAAG,EAAE,CAAC,CAAC;QACL,cAAc,EAAE,cAAc;QAC9B,eAAe,EAAE,eAAe;QAChC,EAAE,EAAE,mBAAmB;KACxB,CAAC,EACF,CAAC,eAAe,EAAE,cAAc,CAAC,CAClC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE/C,MAAM,MAAM,GAAG,2BAA2B,CAAC,mBAAmB,CAAC,CAAC;IAEhE,kEAAkE;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE;YACV,QAAQ,EAAE,CAAC;SACZ;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,EAAE,CAAC;AAC5F,CAAC,CAAC;AAEF,8DAA8D;AAC9D,MAAM,gBAAgB,GAAG,CAAC,MAAuB,EAAO,EAAE;IACxD,uDAAuD;IACvD,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;IAE3B,OAAO,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC;AACrC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\nimport { PeoplePaneContent } from '../../../common/PeoplePaneContent';\nimport { CompositeLocale, useLocale } from '../../../localization';\nimport { ParticipantMenuItemsCallback, _DrawerMenuItemProps } from '@internal/react-components';\nimport { AvatarPersonaDataCallback } from '../../../common/AvatarPersona';\n\nconst PEOPLE_SIDE_PANE_ID = 'people';\n\n/** @private /\nexport const usePeoplePane = (props: {\n updateSidePaneRenderer: (renderer: SidePaneRenderer \| undefined) => void;\n setDrawerMenuItems: (items: _DrawerMenuItemProps[]) => void;\n inviteLink?: string;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n mobileView?: boolean;\n}): {\n openPeoplePane: () => void;\n closePeoplePane: () => void;\n isPeoplePaneOpen: boolean;\n} => {\n const {\n updateSidePaneRenderer,\n inviteLink,\n onFetchAvatarPersonaData,\n onFetchParticipantMenuItems,\n setDrawerMenuItems,\n mobileView\n } = props;\n\n const closePane = useCallback(() => {\n updateSidePaneRenderer(undefined);\n }, [updateSidePaneRenderer]);\n\n const localeStrings = localeTrampoline(useLocale());\n\n const onRenderHeader = useCallback(\n () => (\n <SidePaneHeader\n onClose={closePane}\n headingText={localeStrings.peoplePaneTitle}\n dismissSidePaneButtonAriaLabel={localeStrings.dismissSidePaneButtonLabel}\n mobileView={mobileView ?? false}\n />\n ),\n [mobileView, closePane, localeStrings]\n );\n\n const onRenderContent = useCallback((): JSX.Element => {\n return (\n <PeoplePaneContent\n inviteLink={inviteLink}\n onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n setDrawerMenuItems={setDrawerMenuItems}\n mobileView={mobileView}\n />\n );\n }, [inviteLink, mobileView, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems]);\n\n const sidePaneRenderer: SidePaneRenderer = useMemo(\n () => ({\n headerRenderer: onRenderHeader,\n contentRenderer: onRenderContent,\n id: PEOPLE_SIDE_PANE_ID\n }),\n [onRenderContent, onRenderHeader]\n );\n\n const openPane = useCallback(() => {\n updateSidePaneRenderer(sidePaneRenderer);\n }, [sidePaneRenderer, updateSidePaneRenderer]);\n\n const isOpen = useIsParticularSidePaneOpen(PEOPLE_SIDE_PANE_ID);\n\n // Update pane renderer if it is open and the openPane dep changes\n useEffect(() => {\n if (isOpen) {\n openPane();\n }\n }, [isOpen, openPane]);\n\n return { openPeoplePane: openPane, closePeoplePane: closePane, isPeoplePaneOpen: isOpen };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst localeTrampoline = (locale: CompositeLocale): any => {\n / @conditional-compile-remove(new-call-control-bar) */\n return locale.strings.call;\n\n return locale.strings.callWithChat;\n};\n\"../../../../../../react-components/src\""]}
1	+ {"version":3,"file":"usePeoplePane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { RefObject, useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\nimport { PeoplePaneContent } from '../../../common/PeoplePaneContent';\nimport { CompositeLocale, useLocale } from '../../../localization';\nimport { ParticipantMenuItemsCallback, _DrawerMenuItemProps } from '@internal/react-components';\nimport { AvatarPersonaDataCallback } from '../../../common/AvatarPersona';\nimport { IButton } from '@fluentui/react';\n\nconst PEOPLE_SIDE_PANE_ID = 'people';\n\n/** @private /\nexport const usePeoplePane = (props: {\n updateSidePaneRenderer: (renderer: SidePaneRenderer \| undefined) => void;\n setDrawerMenuItems: (items: _DrawerMenuItemProps[]) => void;\n inviteLink?: string;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;\n mobileView?: boolean;\n peopleButtonRef?: RefObject<IButton>;\n}): {\n openPeoplePane: () => void;\n closePeoplePane: () => void;\n isPeoplePaneOpen: boolean;\n} => {\n const {\n updateSidePaneRenderer,\n inviteLink,\n onFetchAvatarPersonaData,\n onFetchParticipantMenuItems,\n setDrawerMenuItems,\n mobileView,\n peopleButtonRef\n } = props;\n\n const closePane = useCallback(() => {\n updateSidePaneRenderer(undefined);\n peopleButtonRef?.current?.focus();\n }, [peopleButtonRef, updateSidePaneRenderer]);\n\n const localeStrings = localeTrampoline(useLocale());\n\n const onRenderHeader = useCallback(\n () => (\n <SidePaneHeader\n onClose={closePane}\n headingText={localeStrings.peoplePaneTitle}\n dismissSidePaneButtonAriaLabel={localeStrings.dismissSidePaneButtonLabel}\n mobileView={mobileView ?? false}\n />\n ),\n [mobileView, closePane, localeStrings]\n );\n\n const onRenderContent = useCallback((): JSX.Element => {\n return (\n <PeoplePaneContent\n inviteLink={inviteLink}\n onFetchAvatarPersonaData={onFetchAvatarPersonaData}\n onFetchParticipantMenuItems={onFetchParticipantMenuItems}\n setDrawerMenuItems={setDrawerMenuItems}\n mobileView={mobileView}\n />\n );\n }, [inviteLink, mobileView, onFetchAvatarPersonaData, onFetchParticipantMenuItems, setDrawerMenuItems]);\n\n const sidePaneRenderer: SidePaneRenderer = useMemo(\n () => ({\n headerRenderer: onRenderHeader,\n contentRenderer: onRenderContent,\n id: PEOPLE_SIDE_PANE_ID\n }),\n [onRenderContent, onRenderHeader]\n );\n\n const openPane = useCallback(() => {\n updateSidePaneRenderer(sidePaneRenderer);\n }, [sidePaneRenderer, updateSidePaneRenderer]);\n\n const isOpen = useIsParticularSidePaneOpen(PEOPLE_SIDE_PANE_ID);\n\n // Update pane renderer if it is open and the openPane dep changes\n useEffect(() => {\n if (isOpen) {\n openPane();\n }\n }, [isOpen, openPane]);\n\n return { openPeoplePane: openPane, closePeoplePane: closePane, isPeoplePaneOpen: isOpen };\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst localeTrampoline = (locale: CompositeLocale): any => {\n / @conditional-compile-remove(new-call-control-bar) */\n return locale.strings.call;\n\n return locale.strings.callWithChat;\n};\n\"../../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.d.ts CHANGED Viewed

@@ -1,11 +1,13 @@
+import React from 'react';
 import { SidePaneRenderer } from './SidePaneProvider';
 import { ActiveErrorMessage } from "../../../../../../react-components/src";
+import { IButton } from '@fluentui/react';
 /** @private */
 export declare const VIDEO_EFFECTS_SIDE_PANE_ID = "videoeffects";
 /** @private */
 export declare const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;
 /** @private */
-export declare const useVideoEffectsPane: (updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void, mobileView: boolean, latestErrors: ActiveErrorMessage[], onDismissError: (error: ActiveErrorMessage) => void) => {
+export declare const useVideoEffectsPane: (updateSidePaneRenderer: (renderer: SidePaneRenderer | undefined) => void, mobileView: boolean, latestErrors: ActiveErrorMessage[], onDismissError: (error: ActiveErrorMessage) => void, cameraButtonRef?: React.RefObject<IButton> | undefined) => {
     openVideoEffectsPane: () => void;
     closeVideoEffectsPane: () => void;
     toggleVideoEffectsPane: () => void;

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

@@ -11,10 +11,12 @@ export const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';
 /** @private */
 export const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;
 /** @private */
-export const useVideoEffectsPane = (updateSidePaneRenderer, mobileView, latestErrors, onDismissError) => {
+export const useVideoEffectsPane = (updateSidePaneRenderer, mobileView, latestErrors, onDismissError, cameraButtonRef) => {
     const closePane = useCallback(() => {
+        var _a;
         updateSidePaneRenderer(undefined);
-    }, [updateSidePaneRenderer]);
+        (_a = cameraButtonRef === null || cameraButtonRef === void 0 ? void 0 : cameraButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [cameraButtonRef, updateSidePaneRenderer]);
     /* @conditional-compile-remove(video-background-effects) */
     const locale = useLocale();
     const onRenderHeader = useCallback(() => {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useVideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAoB,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACnF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,2DAA2D;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;~~AAG3E~~,eAAe;AACf,MAAM,CAAC,MAAM,0BAA0B,GAAG,cAAc,CAAC;AAEzD,eAAe;AACf,MAAM,CAAC,MAAM,iCAAiC,GAAG,IAAI,CAAC;AAEtD,eAAe;AACf,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,sBAAwE,EACxE,UAAmB,EACnB,YAAkC,EAClC,cAAmD,~~EAMnD~~,EAAE;IACF,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,SAAS,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;~~IAE7B~~,2DAA2D;IAC3D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;;QACtC,OAAO,CACL,oBAAC,cAAc,IACb,OAAO,EAAE,SAAS;YAClB,2DAA2D;YAC3D,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB;YACtD,2DAA2D;YAC3D,8BAA8B,EAC5B,MAAA,MAAA,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,0BAA0B,mCAC9C,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,0BAA0B,mCACtD,OAAO,EAET,UAAU,EAAE,UAAU,GACtB,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,2DAA2D,CAAC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAExG,2DAA2D;IAC3D,MAAM,sBAAsB,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,0BAA0B,CAAC,CAAC;IAEvG,MAAM,eAAe,GAAG,WAAW,CAAC,GAAgB,EAAE;QACpD,OAAO,CACL,oBAAC,uBAAuB,IACtB,cAAc,EAAE,cAAc;YAC9B,2DAA2D;YAC3D,sBAAsB,EAAE,sBAAsB,EAC9C,uBAAuB,EAAE,GAAG,EAAE;gBAC5B,oFAAoF;gBACpF,2DAA2D;gBAC3D,sBAAsB,KAAI,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAG,sBAAsB,CAAC,CAAA,CAAC;YACrE,CAAC,GACD,CACH,CAAC;IACJ,CAAC,EAAE;QACD,2DAA2D;QAC3D,sBAAsB;QACtB,cAAc;KACf,CAAC,CAAC;IAEH,MAAM,gBAAgB,GAAqB,OAAO,CAChD,GAAG,EAAE,CAAC,CAAC;QACL,cAAc,EAAE,cAAc;QAC9B,eAAe,EAAE,eAAe;QAChC,EAAE,EAAE,0BAA0B;KAC/B,CAAC,EACF,CAAC,eAAe,EAAE,cAAc,CAAC,CAClC,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;QAChC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,gBAAgB,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAE/C,MAAM,MAAM,GAAG,2BAA2B,CAAC,0BAA0B,CAAC,CAAC;IAEvE,kEAAkE;IAClE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE;YACV,QAAQ,EAAE,CAAC;SACZ;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,MAAM,EAAE;YACV,SAAS,EAAE,CAAC;SACb;aAAM;YACL,QAAQ,EAAE,CAAC;SACZ;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAElC,OAAO;QACL,oBAAoB,EAAE,QAAQ;QAC9B,qBAAqB,EAAE,SAAS;QAChC,sBAAsB,EAAE,UAAU;QAClC,sBAAsB,EAAE,MAAM;KAC/B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\n/* @conditional-compile-remove(video-background-effects) /\nimport { useLocale } from '../../../localization';\nimport { VideoEffectsPaneContent } from '../../../common/VideoEffectsPane';\nimport { ActiveErrorMessage } from '@internal/react-components';\n\n/* @private /\nexport const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';\n\n/* @private /\nexport const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;\n\n/* @private /\nexport const useVideoEffectsPane = (\n updateSidePaneRenderer: (renderer: SidePaneRenderer \| undefined) => void,\n mobileView: boolean,\n latestErrors: ActiveErrorMessage[],\n onDismissError: (error: ActiveErrorMessage) => void\n): {\n openVideoEffectsPane: () => void;\n closeVideoEffectsPane: () => void;\n toggleVideoEffectsPane: () => void;\n isVideoEffectsPaneOpen: boolean;\n} => {\n const closePane = useCallback(() => {\n updateSidePaneRenderer(undefined);\n }, [updateSidePaneRenderer]);\n\n / @conditional-compile-remove(video-background-effects) /\n const locale = useLocale();\n\n const onRenderHeader = useCallback(() => {\n return (\n <SidePaneHeader\n onClose={closePane}\n / @conditional-compile-remove(video-background-effects) /\n headingText={locale.strings.call.videoEffectsPaneTitle}\n / @conditional-compile-remove(video-background-effects) /\n dismissSidePaneButtonAriaLabel={\n locale.strings.call.dismissSidePaneButtonLabel ??\n locale.strings.callWithChat.dismissSidePaneButtonLabel ??\n 'Close'\n }\n mobileView={mobileView}\n />\n );\n }, [closePane, / @conditional-compile-remove(video-background-effects) / locale.strings, mobileView]);\n\n / @conditional-compile-remove(video-background-effects) /\n const latestVideoEffectError = latestErrors.find((error) => error.type === 'unableToStartVideoEffect');\n\n const onRenderContent = useCallback((): JSX.Element => {\n return (\n <VideoEffectsPaneContent\n onDismissError={onDismissError}\n / @conditional-compile-remove(video-background-effects) /\n activeVideoEffectError={latestVideoEffectError}\n activeVideoEffectChange={() => {\n // Clear any existing video effects error when the user clicks on a new video effect\n / @conditional-compile-remove(video-background-effects) /\n latestVideoEffectError && onDismissError?.(latestVideoEffectError);\n }}\n />\n );\n }, [\n / @conditional-compile-remove(video-background-effects) /\n latestVideoEffectError,\n onDismissError\n ]);\n\n const sidePaneRenderer: SidePaneRenderer = useMemo(\n () => ({\n headerRenderer: onRenderHeader,\n contentRenderer: onRenderContent,\n id: VIDEO_EFFECTS_SIDE_PANE_ID\n }),\n [onRenderContent, onRenderHeader]\n );\n\n const openPane = useCallback(() => {\n updateSidePaneRenderer(sidePaneRenderer);\n }, [sidePaneRenderer, updateSidePaneRenderer]);\n\n const isOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);\n\n // Update pane renderer if it is open and the openPane dep changes\n useEffect(() => {\n if (isOpen) {\n openPane();\n }\n }, [isOpen, openPane]);\n\n const togglePane = useCallback(() => {\n if (isOpen) {\n closePane();\n } else {\n openPane();\n }\n }, [closePane, isOpen, openPane]);\n\n return {\n openVideoEffectsPane: openPane,\n closeVideoEffectsPane: closePane,\n toggleVideoEffectsPane: togglePane,\n isVideoEffectsPaneOpen: isOpen\n };\n};\n\n/\n Active video effect with timestamp.\n \n @private\n /\nexport interface ActiveVideoEffect {\n /\n Type of video effect that is active.\n /\n type: 'blur' \| 'replacement';\n /\n The latest timestamp when this effect was activated.\n \n /\n timestamp: Date;\n}\n\"../../../../../../react-components/src\""]}
1	+ {"version":3,"file":"useVideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport { SidePaneRenderer, useIsParticularSidePaneOpen } from './SidePaneProvider';\nimport { SidePaneHeader } from '../../../common/SidePaneHeader';\n/* @conditional-compile-remove(video-background-effects) /\nimport { useLocale } from '../../../localization';\nimport { VideoEffectsPaneContent } from '../../../common/VideoEffectsPane';\nimport { ActiveErrorMessage } from '@internal/react-components';\nimport { IButton } from '@fluentui/react';\n\n/* @private /\nexport const VIDEO_EFFECTS_SIDE_PANE_ID = 'videoeffects';\n\n/* @private /\nexport const VIDEO_EFFECTS_SIDE_PANE_WIDTH_REM = 17.5;\n\n/* @private /\nexport const useVideoEffectsPane = (\n updateSidePaneRenderer: (renderer: SidePaneRenderer \| undefined) => void,\n mobileView: boolean,\n latestErrors: ActiveErrorMessage[],\n onDismissError: (error: ActiveErrorMessage) => void,\n cameraButtonRef?: React.RefObject<IButton>\n): {\n openVideoEffectsPane: () => void;\n closeVideoEffectsPane: () => void;\n toggleVideoEffectsPane: () => void;\n isVideoEffectsPaneOpen: boolean;\n} => {\n const closePane = useCallback(() => {\n updateSidePaneRenderer(undefined);\n cameraButtonRef?.current?.focus();\n }, [cameraButtonRef, updateSidePaneRenderer]);\n\n / @conditional-compile-remove(video-background-effects) /\n const locale = useLocale();\n\n const onRenderHeader = useCallback(() => {\n return (\n <SidePaneHeader\n onClose={closePane}\n / @conditional-compile-remove(video-background-effects) /\n headingText={locale.strings.call.videoEffectsPaneTitle}\n / @conditional-compile-remove(video-background-effects) /\n dismissSidePaneButtonAriaLabel={\n locale.strings.call.dismissSidePaneButtonLabel ??\n locale.strings.callWithChat.dismissSidePaneButtonLabel ??\n 'Close'\n }\n mobileView={mobileView}\n />\n );\n }, [closePane, / @conditional-compile-remove(video-background-effects) / locale.strings, mobileView]);\n\n / @conditional-compile-remove(video-background-effects) /\n const latestVideoEffectError = latestErrors.find((error) => error.type === 'unableToStartVideoEffect');\n\n const onRenderContent = useCallback((): JSX.Element => {\n return (\n <VideoEffectsPaneContent\n onDismissError={onDismissError}\n / @conditional-compile-remove(video-background-effects) /\n activeVideoEffectError={latestVideoEffectError}\n activeVideoEffectChange={() => {\n // Clear any existing video effects error when the user clicks on a new video effect\n / @conditional-compile-remove(video-background-effects) /\n latestVideoEffectError && onDismissError?.(latestVideoEffectError);\n }}\n />\n );\n }, [\n / @conditional-compile-remove(video-background-effects) /\n latestVideoEffectError,\n onDismissError\n ]);\n\n const sidePaneRenderer: SidePaneRenderer = useMemo(\n () => ({\n headerRenderer: onRenderHeader,\n contentRenderer: onRenderContent,\n id: VIDEO_EFFECTS_SIDE_PANE_ID\n }),\n [onRenderContent, onRenderHeader]\n );\n\n const openPane = useCallback(() => {\n updateSidePaneRenderer(sidePaneRenderer);\n }, [sidePaneRenderer, updateSidePaneRenderer]);\n\n const isOpen = useIsParticularSidePaneOpen(VIDEO_EFFECTS_SIDE_PANE_ID);\n\n // Update pane renderer if it is open and the openPane dep changes\n useEffect(() => {\n if (isOpen) {\n openPane();\n }\n }, [isOpen, openPane]);\n\n const togglePane = useCallback(() => {\n if (isOpen) {\n closePane();\n } else {\n openPane();\n }\n }, [closePane, isOpen, openPane]);\n\n return {\n openVideoEffectsPane: openPane,\n closeVideoEffectsPane: closePane,\n toggleVideoEffectsPane: togglePane,\n isVideoEffectsPaneOpen: isOpen\n };\n};\n\n/\n Active video effect with timestamp.\n \n @private\n /\nexport interface ActiveVideoEffect {\n /\n Type of video effect that is active.\n /\n type: 'blur' \| 'replacement';\n /\n The latest timestamp when this effect was activated.\n \n /\n timestamp: Date;\n}\n\"../../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Camera.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 import { ControlBarButtonStyles } from "../../../../../../react-components/src";
+import React from 'react';
 import { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';
+import { IButton } from '@fluentui/react';
 /**
  * @private
  */
@@ -9,5 +11,6 @@ export declare const Camera: (props: {
     splitButtonsForDeviceSelection?: boolean | undefined;
     disabled?: boolean | undefined;
     onShowVideoEffectsPicker?: ((showVideoEffectsOptions: boolean) => void) | undefined;
+    componentRef?: React.RefObject<IButton> | undefined;
 }) => JSX.Element;
 //# sourceMappingURL=Camera.d.ts.map

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

@@ -21,6 +21,6 @@ export const Camera = (props) => {
             props.disabled ||
             /* @conditional-compile-remove(rooms) */ (isRoomsCall && ((_a = adapter.getState().call) === null || _a === void 0 ? void 0 : _a.role) === 'Unknown'),
         /* @conditional-compile-remove(video-background-effects) */
-        onShowVideoEffectsPicker: props.onShowVideoEffectsPicker })));
+        onShowVideoEffectsPicker: props.onShowVideoEffectsPicker, componentRef: props.componentRef })));
 };
 //# sourceMappingURL=Camera.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Camera.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/buttons/Camera.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,YAAY,EAA0B,+CAAmC;AAClF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,wCAAwC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;~~AAE~~/D;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,~~KAOtB~~,EAAe,EAAE;;IAChB,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,sBAAsB,CAAC,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAA,EAAA,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACzF,wCAAwC;IACxC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,wCAAwC;IACxC,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC;IACnD,OAAO,CACL,oBAAC,YAAY,gCACA,8BAA8B,IACrC,iBAAiB,IACrB,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,SAAS,EAC1C,MAAM,EAAE,MAAM,EACd,yBAAyB,EAAE,KAAK,CAAC,8BAA8B,EAC/D,QAAQ,EACN,iBAAiB,CAAC,QAAQ;YAC1B,KAAK,CAAC,QAAQ;YACd,wCAAwC,CAAC,CAAC,WAAW,IAAI,CAAA,MAAA,OAAO,CAAC,QAAQ,EAAE,CAAC,IAAI,0CAAE,IAAI,MAAK,SAAS,CAAC;QAEvG,2DAA2D;QAC3D,wBAAwB,EAAE,KAAK,CAAC,wBAAwB,~~IACxD~~,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { CameraButton, ControlBarButtonStyles } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';\nimport { usePropsFor } from '../../hooks/usePropsFor';\nimport { concatButtonBaseStyles } from '../../styles/Buttons.styles';\n/* @conditional-compile-remove(rooms) /\nimport { useAdapter } from '../../adapter/CallAdapterProvider';\n\n/\n @private\n /\nexport const Camera = (props: {\n displayType?: CallControlDisplayType;\n styles?: ControlBarButtonStyles;\n splitButtonsForDeviceSelection?: boolean;\n disabled?: boolean;\n / @conditional-compile-remove(video-background-effects) /\n onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;\n}): JSX.Element => {\n const cameraButtonProps = usePropsFor(CameraButton);\n const styles = useMemo(() => concatButtonBaseStyles(props.styles ?? {}), [props.styles]);\n / @conditional-compile-remove(rooms) /\n const adapter = useAdapter();\n / @conditional-compile-remove(rooms) /\n const isRoomsCall = adapter.getState().isRoomsCall;\n return (\n <CameraButton\n data-ui-id=\"call-composite-camera-button\"\n {...cameraButtonProps}\n showLabel={props.displayType !== 'compact'}\n styles={styles}\n enableDeviceSelectionMenu={props.splitButtonsForDeviceSelection}\n disabled={\n cameraButtonProps.disabled \|\|\n props.disabled \|\|\n / @conditional-compile-remove(rooms) / (isRoomsCall && adapter.getState().call?.role === 'Unknown')\n }\n / @conditional-compile-remove(video-background-effects) */\n onShowVideoEffectsPicker={props.onShowVideoEffectsPicker}\n />\n );\n};\n\"../../../../../../react-components/src\""]}
1	+ {"version":3,"file":"Camera.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/buttons/Camera.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,YAAY,EAA0B,+CAAmC;AAClF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,wCAAwC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAG/D;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAQtB,EAAe,EAAE;;IAChB,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,sBAAsB,CAAC,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAA,EAAA,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IACzF,wCAAwC;IACxC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,wCAAwC;IACxC,MAAM,WAAW,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC,WAAW,CAAC;IACnD,OAAO,CACL,oBAAC,YAAY,gCACA,8BAA8B,IACrC,iBAAiB,IACrB,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,SAAS,EAC1C,MAAM,EAAE,MAAM,EACd,yBAAyB,EAAE,KAAK,CAAC,8BAA8B,EAC/D,QAAQ,EACN,iBAAiB,CAAC,QAAQ;YAC1B,KAAK,CAAC,QAAQ;YACd,wCAAwC,CAAC,CAAC,WAAW,IAAI,CAAA,MAAA,OAAO,CAAC,QAAQ,EAAE,CAAC,IAAI,0CAAE,IAAI,MAAK,SAAS,CAAC;QAEvG,2DAA2D;QAC3D,wBAAwB,EAAE,KAAK,CAAC,wBAAwB,EACxD,YAAY,EAAE,KAAK,CAAC,YAAY,IAChC,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { CameraButton, ControlBarButtonStyles } from '@internal/react-components';\nimport React, { useMemo } from 'react';\nimport { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';\nimport { usePropsFor } from '../../hooks/usePropsFor';\nimport { concatButtonBaseStyles } from '../../styles/Buttons.styles';\n/* @conditional-compile-remove(rooms) /\nimport { useAdapter } from '../../adapter/CallAdapterProvider';\nimport { IButton } from '@fluentui/react';\n\n/\n @private\n /\nexport const Camera = (props: {\n displayType?: CallControlDisplayType;\n styles?: ControlBarButtonStyles;\n splitButtonsForDeviceSelection?: boolean;\n disabled?: boolean;\n / @conditional-compile-remove(video-background-effects) /\n onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;\n componentRef?: React.RefObject<IButton>;\n}): JSX.Element => {\n const cameraButtonProps = usePropsFor(CameraButton);\n const styles = useMemo(() => concatButtonBaseStyles(props.styles ?? {}), [props.styles]);\n / @conditional-compile-remove(rooms) /\n const adapter = useAdapter();\n / @conditional-compile-remove(rooms) /\n const isRoomsCall = adapter.getState().isRoomsCall;\n return (\n <CameraButton\n data-ui-id=\"call-composite-camera-button\"\n {...cameraButtonProps}\n showLabel={props.displayType !== 'compact'}\n styles={styles}\n enableDeviceSelectionMenu={props.splitButtonsForDeviceSelection}\n disabled={\n cameraButtonProps.disabled \|\|\n props.disabled \|\|\n / @conditional-compile-remove(rooms) / (isRoomsCall && adapter.getState().call?.role === 'Unknown')\n }\n / @conditional-compile-remove(video-background-effects) */\n onShowVideoEffectsPicker={props.onShowVideoEffectsPicker}\n componentRef={props.componentRef}\n />\n );\n};\n\"../../../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/ChatComposite/ChatScreen.d.ts CHANGED Viewed

@@ -12,6 +12,7 @@ export declare type ChatScreenProps = {
     onRenderMessage?: (messageProps: MessageProps, defaultOnRender?: MessageRenderer) => JSX.Element;
     onRenderTypingIndicator?: (typingUsers: CommunicationParticipant[]) => JSX.Element;
     onFetchParticipantMenuItems?: ParticipantMenuItemsCallback;
+    modalLayerHostId?: string;
     styles?: ChatScreenStyles;
     hasFocusOnMount?: 'sendBoxTextField';
     fileSharing?: FileSharingOptions;

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

@@ -12,6 +12,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { mergeStyles, Stack } from '@fluentui/react';
 import { ErrorBar, MessageThread, SendBox, TypingIndicator, useTheme } from "../../../../react-components/src";
 import React, { useCallback, useEffect } from 'react';
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+import { useState } from 'react';
 import { AvatarPersona } from '../common/AvatarPersona';
 import { useAdapter } from './adapter/ChatAdapterProvider';
 import { ChatHeader, getHeaderProps } from './ChatHeader';
@@ -31,6 +33,8 @@ import { useSelector } from './hooks/useSelector';
 import { FileDownloadErrorBar } from './FileDownloadErrorBar';
 /* @conditional-compile-remove(file-sharing) */
 import { _FileDownloadCards } from "../../../../react-components/src";
+/* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+import { ImageGallery } from "../../../../react-components/src";
 /**
  * @private
  */
@@ -39,6 +43,10 @@ export const ChatScreen = (props) => {
     const defaultNumberOfChatMessagesToReload = 5;
     /* @conditional-compile-remove(file-sharing) */
     const [downloadErrorMessage, setDownloadErrorMessage] = React.useState('');
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    const [fullSizeAttachments, setFullSizeAttachments] = useState({});
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    const [galleryImages, setGalleryImages] = useState(undefined);
     const adapter = useAdapter();
     const theme = useTheme();
     useEffect(() => {
@@ -84,6 +92,37 @@ export const ChatScreen = (props) => {
         }
         return [{ blobUrl: '' }];
     }), [adapter]);
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    const onInlineImageClicked = useCallback((attachment, onRenderTitleIcon) => __awaiter(void 0, void 0, void 0, function* () {
+        const titleIcon = onRenderTitleIcon && onRenderTitleIcon();
+        const galleryImage = {
+            title: attachment.name,
+            titleIcon: titleIcon,
+            saveAsName: attachment.id,
+            imageUrl: ''
+        };
+        if (attachment.id in fullSizeAttachments) {
+            setGalleryImages([
+                Object.assign(Object.assign({}, galleryImage), { imageUrl: fullSizeAttachments[attachment.id] })
+            ]);
+            return;
+        }
+        if (attachment.attachmentType === 'inlineImage' && attachment.url) {
+            const blob = yield adapter.downloadAttachments({ attachmentUrls: [attachment.url] });
+            if (blob[0]) {
+                const blobUrl = blob[0].blobUrl;
+                setFullSizeAttachments((prev) => (Object.assign(Object.assign({}, prev), { [attachment.id]: blobUrl })));
+                setGalleryImages([
+                    Object.assign(Object.assign({}, galleryImage), { imageUrl: blobUrl })
+                ]);
+            }
+        }
+    }), [adapter, fullSizeAttachments]);
+    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+    const handleOnDownloadImage = (blobUrl, filename) => {
+        // Place holder function for download handler
+        console.log(blobUrl, filename);
+    };
     const AttachFileButton = useCallback(() => {
         if (!(fileSharing === null || fileSharing === void 0 ? void 0 : fileSharing.uploadHandler)) {
             return null;
@@ -103,7 +142,9 @@ export const ChatScreen = (props) => {
                     /* @conditional-compile-remove(file-sharing) */
                     onRenderFileDownloads: onRenderFileDownloads,
                     /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
-                    onFetchAttachments: onRenderInlineAttachment, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
+                    onFetchAttachments: onRenderInlineAttachment,
+                    /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+                    onInlineImageClicked: onInlineImageClicked, numberOfChatMessagesToReload: defaultNumberOfChatMessagesToReload, styles: messageThreadStyles })),
                 React.createElement(Stack, { className: mergeStyles(sendboxContainerStyles) },
                     React.createElement("div", { className: mergeStyles(typingIndicatorContainerStyles) }, onRenderTypingIndicator ? (onRenderTypingIndicator(typingIndicatorProps.typingUsers)) : (React.createElement(TypingIndicator, Object.assign({}, typingIndicatorProps, { styles: typingIndicatorStyles })))),
                     React.createElement(Stack, { horizontal: formFactor === 'mobile' },
@@ -117,6 +158,8 @@ export const ChatScreen = (props) => {
                                 onCancelFileUpload: adapter.cancelFileUpload }))),
                         formFactor !== 'mobile' && React.createElement(AttachFileButton, null)))),
             /* @conditional-compile-remove(chat-composite-participant-pane) */
-            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React.createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' })))));
+            (options === null || options === void 0 ? void 0 : options.participantPane) === true && (React.createElement(ChatScreenPeoplePane, { onFetchAvatarPersonaData: onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.onFetchParticipantMenuItems, isMobile: formFactor === 'mobile' }))),
+        /* @conditional-compile-remove(teams-inline-images-and-file-sharing) */
+        galleryImages && galleryImages.length > 0 && (React.createElement(ImageGallery, { modalLayerHostId: props.modalLayerHostId, images: galleryImages, onDismiss: () => setGalleryImages(undefined), onImageDownloadButtonClicked: handleOnDownloadImage }))));
 };
 //# sourceMappingURL=ChatScreen.js.map