@azure/communication-react 1.5.1-alpha-202305030013 → 1.5.1-alpha-202305040013
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.beta.md +9 -1
- package/dist/dist-cjs/communication-react/index.js +1874 -1843
- package/dist/dist-cjs/communication-react/index.js.map +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/Caption.js +1 -2
- package/dist/dist-esm/react-components/src/components/Caption.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/Captions.style.js +3 -2
- package/dist/dist-esm/react-components/src/components/styles/Captions.style.js.map +1 -1
- package/dist/dist-esm/react-components/src/theming/icons.js +12 -5
- package/dist/dist-esm/react-components/src/theming/icons.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.d.ts +12 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js +33 -19
- package/dist/dist-esm/react-composites/src/composites/CallComposite/CallComposite.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.d.ts +4 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js +70 -65
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallArrangement.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js +2 -3
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallControls.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalPreview.js +16 -3
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalPreview.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePane.d.ts +14 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePane.js +63 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePane.js.map +1 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePaneProvider.d.ts +58 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePaneProvider.js +31 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/SidePaneProvider.js.map +1 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.d.ts +17 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.js +43 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/usePeoplePane.js.map +1 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.d.ts +9 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.js +58 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/SidePane/useVideoEffectsPane.js.map +1 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Custom.d.ts +0 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Custom.js +2 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Custom.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.d.ts +4 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js +2 -4
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/CallPage.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.d.ts +2 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js +29 -29
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/HoldPage.d.ts +4 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/HoldPage.js +1 -3
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/HoldPage.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/LobbyPage.d.ts +4 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/LobbyPage.js +1 -3
- package/dist/dist-esm/react-composites/src/composites/CallComposite/pages/LobbyPage.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.d.ts +2 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.js +4 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/styles/CallConfiguration.styles.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/types/CallControlOptions.d.ts +9 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/types/CallControlOptions.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js +116 -162
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatComposite.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/{ChatButton.d.ts → ChatButton/ChatButton.d.ts} +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/{ChatButton.js → ChatButton/ChatButton.js} +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton/ChatButton.js.map +1 -0
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/{ChatButtonWithUnreadMessagesBadge.d.ts → ChatButton/ChatButtonWithUnreadMessagesBadge.d.ts} +2 -2
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/{ChatButtonWithUnreadMessagesBadge.js → ChatButton/ChatButtonWithUnreadMessagesBadge.js} +3 -3
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton/ChatButtonWithUnreadMessagesBadge.js.map +1 -0
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton/NotificationIcon.js.map +1 -0
- package/dist/dist-esm/react-composites/src/composites/common/AddPeopleButton.js +2 -2
- package/dist/dist-esm/react-composites/src/composites/common/AddPeopleButton.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/AddPeopleDropdown.js +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/AddPeopleDropdown.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.d.ts +4 -5
- package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js +11 -24
- package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CustomButton.js +5 -2
- package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CustomButton.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/ConvertContextualMenuItemToDrawerMenuItem.js.map +1 -0
- package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.d.ts +0 -9
- package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.js +32 -12
- package/dist/dist-esm/react-composites/src/composites/common/PeoplePaneContent.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/SidePaneHeader.d.ts +4 -4
- package/dist/dist-esm/react-composites/src/composites/common/SidePaneHeader.js +27 -2
- package/dist/dist-esm/react-composites/src/composites/common/SidePaneHeader.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/TabHeader.d.ts +8 -5
- package/dist/dist-esm/react-composites/src/composites/common/TabHeader.js +11 -2
- package/dist/dist-esm/react-composites/src/composites/common/TabHeader.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.d.ts +1 -17
- package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js +17 -16
- package/dist/dist-esm/react-composites/src/composites/common/VideoEffectsPane.js.map +1 -1
- package/dist/dist-esm/react-composites/src/composites/common/types/CommonCallControlOptions.d.ts +8 -0
- package/dist/dist-esm/react-composites/src/composites/common/types/CommonCallControlOptions.js.map +1 -1
- package/package.json +8 -8
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallPane.d.ts +0 -24
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallPane.js +0 -80
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CallPane.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useSidePaneState.d.ts +0 -16
- package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useSidePaneState.js +0 -38
- package/dist/dist-esm/react-composites/src/composites/CallComposite/hooks/useSidePaneState.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatPane.d.ts +0 -34
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatPane.js +0 -90
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/CallWithChatPane.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButton.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ChatButtonWithUnreadMessagesBadge.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/ConvertContextualMenuItemToDrawerMenuItem.js.map +0 -1
- package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/NotificationIcon.js.map +0 -1
- /package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/{NotificationIcon.d.ts → ChatButton/NotificationIcon.d.ts} +0 -0
- /package/dist/dist-esm/react-composites/src/composites/CallWithChatComposite/{NotificationIcon.js → ChatButton/NotificationIcon.js} +0 -0
- /package/dist/dist-esm/react-composites/src/composites/{CallWithChatComposite → common}/ConvertContextualMenuItemToDrawerMenuItem.d.ts +0 -0
- /package/dist/dist-esm/react-composites/src/composites/{CallWithChatComposite → common}/ConvertContextualMenuItemToDrawerMenuItem.js +0 -0
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"AddPeopleButton.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AddPeopleButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAiB,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChH,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAI9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,sCAAsC,CAAC;AACjF,OAAO,EACL,6BAA6B,EAC7B,yBAAyB,EACzB,oBAAoB,EACpB,cAAc,EACd,0BAA0B,EAC3B,MAAM,mCAAmC,CAAC;AAC3C,6CAA6C;AAC7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAKxD,OAAO,EAAE,SAAS,EAAE,yCAAmC;AAevD,eAAe;AACf,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAe,EAAE;IAC1E,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IAEnE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,CAAC,8BAA8B,EAAE,iCAAiC,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAEjG,MAAM,0BAA0B,GAAG,OAAO,CACxC,GAAkB,EAAE,CAAC,eAAe,CAAC,oBAAoB,EAAE,0BAA0B,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,EACzG,CAAC,UAAU,EAAE,KAAK,CAAC,CACpB,CAAC;IACF;;OAEG;IACH,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,iCAAiC,CAAC,OAAO,CAAC,+BAA+B,CAAC,CAAC;QAC3E;;;WAGG;QACH,UAAU,CAAC,GAAG,EAAE;YACd,iCAAiC,CAAC,EAAE,CAAC,CAAC;QACxC,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,EAAE,CAAC,OAAO,CAAC,+BAA+B,CAAC,CAAC,CAAC;IAE9C,6CAA6C;IAC7C,IAAI,UAAU,EAAE;QACd,OAAO,CACL,oBAAC,iBAAiB,IAChB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EACxC,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,GAC1C,CACH,CAAC;KACH;SAAM;QACL,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,yBAAyB;
|
1
|
+
{"version":3,"file":"AddPeopleButton.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AddPeopleButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { concatStyleSets, DefaultButton, IButtonStyles, PrimaryButton, Stack, useTheme } from '@fluentui/react';\nimport copy from 'copy-to-clipboard';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { CallWithChatCompositeStrings } from '../../index-public';\n/* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */\nimport { CallCompositeStrings } from '../../index-public';\nimport { CallWithChatCompositeIcon } from './icons';\nimport { peoplePaneContainerTokens } from './styles/ParticipantContainer.styles';\nimport {\n copyLinkButtonContainerStyles,\n copyLinkButtonStackStyles,\n copyLinkButtonStyles,\n linkIconStyles,\n themedCopyLinkButtonStyles\n} from './styles/PeoplePaneContent.styles';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { AddPeopleDropdown } from './AddPeopleDropdown';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\nimport { Announcer } from '@internal/react-components';\n\n/** @private */\nexport interface AddPeopleButtonProps {\n inviteLink?: string;\n mobileView?: boolean;\n participantList?: JSX.Element;\n strings:\n | CallWithChatCompositeStrings\n | /* @conditional-compile-remove(one-to-n-calling) @conditional-compile-remove(PSTN-calls) */ CallCompositeStrings;\n /* @conditional-compile-remove(PSTN-calls) */\n onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;\n alternateCallerId?: string;\n}\n\n/** @private */\nexport const AddPeopleButton = (props: AddPeopleButtonProps): JSX.Element => {\n const { inviteLink, mobileView, strings, participantList } = props;\n\n const theme = useTheme();\n\n const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = useState<string>('');\n\n const copyLinkButtonStylesThemed = useMemo(\n (): IButtonStyles => concatStyleSets(copyLinkButtonStyles, themedCopyLinkButtonStyles(mobileView, theme)),\n [mobileView, theme]\n );\n /**\n * sets the announcement string for when the link is copied.\n */\n const toggleAnnouncerString = useCallback(() => {\n setCopyInviteLinkAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n /**\n * Clears the announcer string after the user clicks the\n * copyInviteLink button allowing it to be re-announced.\n */\n setTimeout(() => {\n setCopyInviteLinkAnnouncerStrings('');\n }, 3000);\n }, [strings.copyInviteLinkActionedAriaLabel]);\n\n /* @conditional-compile-remove(PSTN-calls) */\n if (mobileView) {\n return (\n <AddPeopleDropdown\n strings={strings}\n mobileView={mobileView}\n inviteLink={inviteLink}\n onAddParticipant={props.onAddParticipant}\n alternateCallerId={props.alternateCallerId}\n />\n );\n } else {\n return (\n <Stack tokens={peoplePaneContainerTokens} data-ui-id=\"people-pane-content\">\n <AddPeopleDropdown\n strings={strings}\n mobileView={mobileView}\n inviteLink={inviteLink}\n onAddParticipant={props.onAddParticipant}\n alternateCallerId={props.alternateCallerId}\n />\n {participantList}\n </Stack>\n );\n }\n\n if (mobileView) {\n return (\n <Stack>\n {inviteLink && (\n <Stack.Item styles={copyLinkButtonContainerStyles}>\n <Announcer announcementString={copyInviteLinkAnnouncerStrings} ariaLive={'polite'} />\n <PrimaryButton\n onClick={() => {\n copy(inviteLink ?? '');\n toggleAnnouncerString();\n }}\n styles={copyLinkButtonStylesThemed}\n onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"Link\" style={linkIconStyles} />}\n text={strings.copyInviteLinkButtonLabel}\n />\n </Stack.Item>\n )}\n </Stack>\n );\n } else {\n return (\n <Stack tokens={peoplePaneContainerTokens} data-ui-id=\"people-pane-content\">\n {inviteLink && (\n <Stack styles={copyLinkButtonStackStyles}>\n <Announcer announcementString={copyInviteLinkAnnouncerStrings} ariaLive={'polite'} />\n <DefaultButton\n text={strings.copyInviteLinkButtonLabel}\n onRenderIcon={() => <CallWithChatCompositeIcon iconName=\"Link\" style={linkIconStyles} />}\n onClick={() => {\n copy(inviteLink ?? '');\n toggleAnnouncerString();\n }}\n styles={copyLinkButtonStylesThemed}\n />\n </Stack>\n )}\n {participantList}\n </Stack>\n );\n }\n};\n\"../../../../react-components/src\""]}
|
@@ -12,7 +12,7 @@ import { CallingDialpad } from './CallingDialpad';
|
|
12
12
|
import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../../acs-ui-common/src";
|
13
13
|
import { copyLinkButtonContainerStyles, copyLinkButtonStackStyles } from './styles/PeoplePaneContent.styles';
|
14
14
|
import { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';
|
15
|
-
import { convertContextualMenuItemToDrawerMenuItem } from '
|
15
|
+
import { convertContextualMenuItemToDrawerMenuItem } from './ConvertContextualMenuItemToDrawerMenuItem';
|
16
16
|
/** @private */
|
17
17
|
export const AddPeopleDropdown = (props) => {
|
18
18
|
const theme = useTheme();
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"AddPeopleDropdown.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AddPeopleDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\nimport {\n DefaultButton,\n IContextualMenuItem,\n IContextualMenuProps,\n PrimaryButton,\n Stack,\n useTheme\n} from '@fluentui/react';\n\nimport { _DrawerMenu, _DrawerMenuItemProps, Announcer } from '@internal/react-components';\nimport copy from 'copy-to-clipboard';\nimport { useMemo, useState } from 'react';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { CallWithChatCompositeIcon } from './icons';\nimport { iconStyles, themedCopyLinkButtonStyles, themedMenuStyle } from './AddPeopleDropdown.styles';\nimport { CallingDialpad } from './CallingDialpad';\nimport { CallingDialpadStrings } from './CallingDialpad';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { copyLinkButtonContainerStyles, copyLinkButtonStackStyles } from './styles/PeoplePaneContent.styles';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\nimport { convertContextualMenuItemToDrawerMenuItem } from '../CallWithChatComposite/ConvertContextualMenuItemToDrawerMenuItem';\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\n\n/** @private */\nexport interface AddPeopleDropdownStrings extends CallingDialpadStrings {\n copyInviteLinkButtonLabel: string;\n openDialpadButtonLabel: string;\n peoplePaneAddPeopleButtonLabel: string;\n copyInviteLinkActionedAriaLabel: string;\n}\n\n/** @private */\nexport interface AddPeopleDropdownProps {\n inviteLink?: string;\n mobileView?: boolean;\n strings: AddPeopleDropdownStrings;\n onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;\n alternateCallerId?: string;\n}\n\n/** @private */\nexport const AddPeopleDropdown = (props: AddPeopleDropdownProps): JSX.Element => {\n const theme = useTheme();\n\n const { inviteLink, strings, mobileView, onAddParticipant, alternateCallerId } = props;\n\n const [showDialpad, setShowDialpad] = useState(false);\n\n const [announcerStrings, setAnnouncerStrings] = useState<string>();\n\n const menuStyleThemed = useMemo(() => themedMenuStyle(theme), [theme]);\n\n const copyLinkButtonStylesThemed = useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);\n\n const defaultMenuProps = useMemo((): IContextualMenuProps => {\n const menuProps: IContextualMenuProps = {\n styles: menuStyleThemed,\n items: [],\n useTargetWidth: true,\n calloutProps: {\n preventDismissOnEvent\n },\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onMenuOpened(contextualMenu?) {\n setAnnouncerStrings(undefined);\n }\n };\n\n if (inviteLink) {\n menuProps.items.push({\n key: 'InviteLinkKey',\n text: strings.copyInviteLinkButtonLabel,\n itemProps: { styles: copyLinkButtonStylesThemed },\n iconProps: { iconName: 'Link', style: iconStyles },\n onClick: () => {\n setAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n copy(inviteLink);\n }\n });\n }\n\n // only show the dialpad option when alternateCallerId is set\n if (alternateCallerId) {\n menuProps.items.push({\n key: 'DialpadKey',\n text: strings.openDialpadButtonLabel,\n itemProps: { styles: copyLinkButtonStylesThemed },\n iconProps: { iconName: PeoplePaneOpenDialpadIconNameTrampoline(), style: iconStyles },\n onClick: () => setShowDialpad(true),\n 'data-ui-id': 'call-dial-phone-number-button'\n });\n }\n\n return menuProps;\n }, [\n menuStyleThemed,\n inviteLink,\n alternateCallerId,\n strings.copyInviteLinkButtonLabel,\n strings.copyInviteLinkActionedAriaLabel,\n strings.openDialpadButtonLabel,\n copyLinkButtonStylesThemed\n ]);\n\n const onDismissDialpad = (): void => {\n setShowDialpad(false);\n };\n\n const [addPeopleDrawerMenuItems, setAddPeopleDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n\n const setDrawerMenuItemsForAddPeople: () => void = useMemo(() => {\n return () => {\n const drawerMenuItems = defaultMenuProps.items.map((contextualMenu: IContextualMenuItem) =>\n convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setAddPeopleDrawerMenuItems([]))\n );\n setAddPeopleDrawerMenuItems(drawerMenuItems);\n };\n }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);\n\n if (mobileView) {\n return (\n <Stack>\n <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n {defaultMenuProps.items.length > 0 && (\n <Stack.Item styles={copyLinkButtonContainerStyles}>\n <PrimaryButton\n onClick={setDrawerMenuItemsForAddPeople}\n styles={copyLinkButtonStylesThemed}\n onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()}\n text={strings.peoplePaneAddPeopleButtonLabel}\n data-ui-id=\"call-add-people-button\"\n />\n </Stack.Item>\n )}\n\n {addPeopleDrawerMenuItems.length > 0 && (\n <Stack styles={drawerContainerStyles()} data-ui-id=\"call-add-people-dropdown\">\n <_DrawerMenu onLightDismiss={() => setAddPeopleDrawerMenuItems([])} items={addPeopleDrawerMenuItems} />\n </Stack>\n )}\n {alternateCallerId && (\n <CallingDialpad\n isMobile\n strings={strings}\n showDialpad={showDialpad}\n onDismissDialpad={onDismissDialpad}\n onAddParticipant={onAddParticipant}\n alternateCallerId={alternateCallerId}\n />\n )}\n </Stack>\n );\n }\n\n return (\n <>\n {\n <Stack>\n <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n {alternateCallerId && (\n <CallingDialpad\n isMobile={false}\n strings={strings}\n showDialpad={showDialpad}\n onDismissDialpad={onDismissDialpad}\n onAddParticipant={onAddParticipant}\n alternateCallerId={alternateCallerId}\n />\n )}\n\n {defaultMenuProps.items.length > 0 && (\n <Stack styles={copyLinkButtonStackStyles}>\n <DefaultButton\n onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()}\n text={strings.peoplePaneAddPeopleButtonLabel}\n menuProps={defaultMenuProps}\n styles={copyLinkButtonStylesThemed}\n data-ui-id=\"call-add-people-button\"\n />\n </Stack>\n )}\n </Stack>\n }\n </>\n );\n};\n\nfunction PeoplePaneOpenDialpadIconNameTrampoline(): string {\n /* @conditional-compile-remove(PSTN-calls) */\n return 'PeoplePaneOpenDialpad';\n\n return '';\n}\n\nfunction PeoplePaneAddPersonIconTrampoline(): JSX.Element {\n /* @conditional-compile-remove(PSTN-calls) */\n return <CallWithChatCompositeIcon iconName=\"PeoplePaneAddPerson\" />;\n\n return <></>;\n}\n\"../../../../react-components/src\"\"../../../../acs-ui-common/src\""]}
|
1
|
+
{"version":3,"file":"AddPeopleDropdown.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AddPeopleDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\nimport {\n DefaultButton,\n IContextualMenuItem,\n IContextualMenuProps,\n PrimaryButton,\n Stack,\n useTheme\n} from '@fluentui/react';\n\nimport { _DrawerMenu, _DrawerMenuItemProps, Announcer } from '@internal/react-components';\nimport copy from 'copy-to-clipboard';\nimport { useMemo, useState } from 'react';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { CallWithChatCompositeIcon } from './icons';\nimport { iconStyles, themedCopyLinkButtonStyles, themedMenuStyle } from './AddPeopleDropdown.styles';\nimport { CallingDialpad } from './CallingDialpad';\nimport { CallingDialpadStrings } from './CallingDialpad';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { copyLinkButtonContainerStyles, copyLinkButtonStackStyles } from './styles/PeoplePaneContent.styles';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\nimport { convertContextualMenuItemToDrawerMenuItem } from './ConvertContextualMenuItemToDrawerMenuItem';\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\n\n/** @private */\nexport interface AddPeopleDropdownStrings extends CallingDialpadStrings {\n copyInviteLinkButtonLabel: string;\n openDialpadButtonLabel: string;\n peoplePaneAddPeopleButtonLabel: string;\n copyInviteLinkActionedAriaLabel: string;\n}\n\n/** @private */\nexport interface AddPeopleDropdownProps {\n inviteLink?: string;\n mobileView?: boolean;\n strings: AddPeopleDropdownStrings;\n onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;\n alternateCallerId?: string;\n}\n\n/** @private */\nexport const AddPeopleDropdown = (props: AddPeopleDropdownProps): JSX.Element => {\n const theme = useTheme();\n\n const { inviteLink, strings, mobileView, onAddParticipant, alternateCallerId } = props;\n\n const [showDialpad, setShowDialpad] = useState(false);\n\n const [announcerStrings, setAnnouncerStrings] = useState<string>();\n\n const menuStyleThemed = useMemo(() => themedMenuStyle(theme), [theme]);\n\n const copyLinkButtonStylesThemed = useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);\n\n const defaultMenuProps = useMemo((): IContextualMenuProps => {\n const menuProps: IContextualMenuProps = {\n styles: menuStyleThemed,\n items: [],\n useTargetWidth: true,\n calloutProps: {\n preventDismissOnEvent\n },\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n onMenuOpened(contextualMenu?) {\n setAnnouncerStrings(undefined);\n }\n };\n\n if (inviteLink) {\n menuProps.items.push({\n key: 'InviteLinkKey',\n text: strings.copyInviteLinkButtonLabel,\n itemProps: { styles: copyLinkButtonStylesThemed },\n iconProps: { iconName: 'Link', style: iconStyles },\n onClick: () => {\n setAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n copy(inviteLink);\n }\n });\n }\n\n // only show the dialpad option when alternateCallerId is set\n if (alternateCallerId) {\n menuProps.items.push({\n key: 'DialpadKey',\n text: strings.openDialpadButtonLabel,\n itemProps: { styles: copyLinkButtonStylesThemed },\n iconProps: { iconName: PeoplePaneOpenDialpadIconNameTrampoline(), style: iconStyles },\n onClick: () => setShowDialpad(true),\n 'data-ui-id': 'call-dial-phone-number-button'\n });\n }\n\n return menuProps;\n }, [\n menuStyleThemed,\n inviteLink,\n alternateCallerId,\n strings.copyInviteLinkButtonLabel,\n strings.copyInviteLinkActionedAriaLabel,\n strings.openDialpadButtonLabel,\n copyLinkButtonStylesThemed\n ]);\n\n const onDismissDialpad = (): void => {\n setShowDialpad(false);\n };\n\n const [addPeopleDrawerMenuItems, setAddPeopleDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n\n const setDrawerMenuItemsForAddPeople: () => void = useMemo(() => {\n return () => {\n const drawerMenuItems = defaultMenuProps.items.map((contextualMenu: IContextualMenuItem) =>\n convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setAddPeopleDrawerMenuItems([]))\n );\n setAddPeopleDrawerMenuItems(drawerMenuItems);\n };\n }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);\n\n if (mobileView) {\n return (\n <Stack>\n <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n {defaultMenuProps.items.length > 0 && (\n <Stack.Item styles={copyLinkButtonContainerStyles}>\n <PrimaryButton\n onClick={setDrawerMenuItemsForAddPeople}\n styles={copyLinkButtonStylesThemed}\n onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()}\n text={strings.peoplePaneAddPeopleButtonLabel}\n data-ui-id=\"call-add-people-button\"\n />\n </Stack.Item>\n )}\n\n {addPeopleDrawerMenuItems.length > 0 && (\n <Stack styles={drawerContainerStyles()} data-ui-id=\"call-add-people-dropdown\">\n <_DrawerMenu onLightDismiss={() => setAddPeopleDrawerMenuItems([])} items={addPeopleDrawerMenuItems} />\n </Stack>\n )}\n {alternateCallerId && (\n <CallingDialpad\n isMobile\n strings={strings}\n showDialpad={showDialpad}\n onDismissDialpad={onDismissDialpad}\n onAddParticipant={onAddParticipant}\n alternateCallerId={alternateCallerId}\n />\n )}\n </Stack>\n );\n }\n\n return (\n <>\n {\n <Stack>\n <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n {alternateCallerId && (\n <CallingDialpad\n isMobile={false}\n strings={strings}\n showDialpad={showDialpad}\n onDismissDialpad={onDismissDialpad}\n onAddParticipant={onAddParticipant}\n alternateCallerId={alternateCallerId}\n />\n )}\n\n {defaultMenuProps.items.length > 0 && (\n <Stack styles={copyLinkButtonStackStyles}>\n <DefaultButton\n onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()}\n text={strings.peoplePaneAddPeopleButtonLabel}\n menuProps={defaultMenuProps}\n styles={copyLinkButtonStylesThemed}\n data-ui-id=\"call-add-people-button\"\n />\n </Stack>\n )}\n </Stack>\n }\n </>\n );\n};\n\nfunction PeoplePaneOpenDialpadIconNameTrampoline(): string {\n /* @conditional-compile-remove(PSTN-calls) */\n return 'PeoplePaneOpenDialpad';\n\n return '';\n}\n\nfunction PeoplePaneAddPersonIconTrampoline(): JSX.Element {\n /* @conditional-compile-remove(PSTN-calls) */\n return <CallWithChatCompositeIcon iconName=\"PeoplePaneAddPerson\" />;\n\n return <></>;\n}\n\"../../../../react-components/src\"\"../../../../acs-ui-common/src\""]}
|
package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.d.ts
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { CallAdapter } from '../../CallComposite';
|
3
|
-
import {
|
3
|
+
import { ITheme } from '@fluentui/react';
|
4
|
+
import { ControlBarButtonStyles } from "../../../../../react-components/src";
|
4
5
|
import { ContainerRectProps } from '../ContainerRectProps';
|
5
6
|
import { CallWithChatControlOptions } from '../../CallWithChatComposite';
|
6
7
|
import { CommonCallControlOptions } from '../types/CommonCallControlOptions';
|
@@ -9,23 +10,21 @@ import { CommonCallControlOptions } from '../types/CommonCallControlOptions';
|
|
9
10
|
*/
|
10
11
|
export interface CommonCallControlBarProps {
|
11
12
|
callAdapter: CallAdapter;
|
12
|
-
chatButtonChecked?: boolean;
|
13
13
|
peopleButtonChecked: boolean;
|
14
|
-
onChatButtonClicked?: () => void;
|
15
14
|
onPeopleButtonClicked: () => void;
|
16
15
|
onMoreButtonClicked?: () => void;
|
17
16
|
mobileView: boolean;
|
18
17
|
disableButtonsForLobbyPage: boolean;
|
19
18
|
callControls?: boolean | CommonCallControlOptions | CallWithChatControlOptions;
|
20
|
-
chatAdapter?: ChatAdapter;
|
21
19
|
disableButtonsForHoldScreen?: boolean;
|
22
20
|
onClickShowDialpad?: () => void;
|
23
21
|
onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;
|
24
|
-
rtl?: boolean;
|
25
22
|
isCaptionsSupported?: boolean;
|
26
23
|
}
|
27
24
|
/**
|
28
25
|
* @private
|
29
26
|
*/
|
30
27
|
export declare const CommonCallControlBar: (props: CommonCallControlBarProps & ContainerRectProps) => JSX.Element;
|
28
|
+
/** @private */
|
29
|
+
export declare const getDesktopCommonButtonStyles: (theme: ITheme) => ControlBarButtonStyles;
|
31
30
|
//# sourceMappingURL=CommonCallControlBar.d.ts.map
|
package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js
CHANGED
@@ -7,7 +7,6 @@ import { concatStyleSets, mergeStyles, mergeStyleSets, Stack, useTheme } from '@
|
|
7
7
|
import { controlBarContainerStyles } from '../../CallComposite/styles/CallControls.styles';
|
8
8
|
import { callControlsContainerStyles } from '../../CallComposite/styles/CallPage.styles';
|
9
9
|
import { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';
|
10
|
-
import { ChatButtonWithUnreadMessagesBadge } from '../../CallWithChatComposite/ChatButtonWithUnreadMessagesBadge';
|
11
10
|
import { ControlBar } from "../../../../../react-components/src";
|
12
11
|
/* @conditional-compile-remove(rooms) */
|
13
12
|
import { _usePermissions } from "../../../../../react-components/src";
|
@@ -16,7 +15,6 @@ import { Camera } from '../../CallComposite/components/buttons/Camera';
|
|
16
15
|
import { ScreenShare } from '../../CallComposite/components/buttons/ScreenShare';
|
17
16
|
import { EndCall } from '../../CallComposite/components/buttons/EndCall';
|
18
17
|
import { MoreButton } from '../MoreButton';
|
19
|
-
/* @conditional-compile-remove(control-bar-button-injection) */
|
20
18
|
import { CUSTOM_BUTTON_OPTIONS, generateCustomCallControlBarButton, onFetchCustomButtonPropsTrampoline } from './CustomButton';
|
21
19
|
/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
|
22
20
|
import { DesktopMoreButton } from './DesktopMoreButton';
|
@@ -44,8 +42,9 @@ const inferCommonCallControlOptions = (mobileView, commonCallControlOptions) =>
|
|
44
42
|
* @private
|
45
43
|
*/
|
46
44
|
export const CommonCallControlBar = (props) => {
|
47
|
-
var _a, _b
|
45
|
+
var _a, _b;
|
48
46
|
const theme = useTheme();
|
47
|
+
const rtl = theme.rtl;
|
49
48
|
const controlBarContainerRef = useRef(null);
|
50
49
|
const sidepaneControlsRef = useRef(null);
|
51
50
|
const controlBarSizeRef = useRef(null);
|
@@ -92,11 +91,6 @@ export const CommonCallControlBar = (props) => {
|
|
92
91
|
const onDismissCaptionsSettings = useCallback(() => {
|
93
92
|
setShowCaptionsSettingsModal(false);
|
94
93
|
}, []);
|
95
|
-
const chatButtonStrings = useMemo(() => ({
|
96
|
-
label: callWithChatStrings.chatButtonLabel,
|
97
|
-
tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,
|
98
|
-
tooltipOnContent: callWithChatStrings.chatButtonTooltipClose
|
99
|
-
}), [callWithChatStrings]);
|
100
94
|
const peopleButtonStrings = useMemo(() => ({
|
101
95
|
label: callWithChatStrings.peopleButtonLabel,
|
102
96
|
tooltipOffContent: callWithChatStrings.peopleButtonTooltipOpen,
|
@@ -120,16 +114,14 @@ export const CommonCallControlBar = (props) => {
|
|
120
114
|
const endCallButtonStyles = useMemo(() => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined), [props.mobileView, theme]);
|
121
115
|
const controlBarWrapperDesktopStyles = useMemo(
|
122
116
|
// only center control bar buttons based on parent container if there are enough space on the screen and not mobile
|
123
|
-
() => (!props.mobileView && !isOutOfSpace ? (
|
117
|
+
() => (!props.mobileView && !isOutOfSpace ? (rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles) : {}), [props.mobileView, rtl, isOutOfSpace]);
|
124
118
|
// only center control bar buttons based on parent container if there are enough space on the screen and not mobile
|
125
119
|
const controlBarDesktopContainerStyles = useMemo(() => (!props.mobileView && !isOutOfSpace ? { position: 'relative', minHeight: '4.5rem', width: '100%' } : {}), [props.mobileView, isOutOfSpace]);
|
126
|
-
/* @conditional-compile-remove(control-bar-button-injection) */
|
127
120
|
const customButtons = useMemo(() => generateCustomCallControlBarButton(onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined), options !== false ? options === null || options === void 0 ? void 0 : options.displayType : undefined), [options]);
|
128
121
|
// when options is false then we want to hide the whole control bar.
|
129
122
|
if (options === false) {
|
130
123
|
return React.createElement(React.Fragment, null);
|
131
124
|
}
|
132
|
-
const chatButton = props.chatAdapter ? (React.createElement(ChatButtonWithUnreadMessagesBadge, { chatAdapter: props.chatAdapter, checked: props.chatButtonChecked, showLabel: options.displayType !== 'compact', isChatPaneVisible: (_a = props.chatButtonChecked) !== null && _a !== void 0 ? _a : false, onClick: props.onChatButtonClicked, disabled: props.disableButtonsForLobbyPage || isDisabled(options.chatButton), strings: chatButtonStrings, styles: commonButtonStyles, newMessageLabel: callWithChatStrings.chatButtonNewMessageNotificationLabel })) : (React.createElement(React.Fragment, null));
|
133
125
|
/* @conditional-compile-remove(rooms) */
|
134
126
|
const rolePermissions = _usePermissions();
|
135
127
|
let screenShareButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.screenShareButton);
|
@@ -160,13 +152,10 @@ export const CommonCallControlBar = (props) => {
|
|
160
152
|
disabled: props.disableButtonsForHoldScreen || isDisabled(options.cameraButton),
|
161
153
|
/* @conditional-compile-remove(video-background-effects) */
|
162
154
|
onShowVideoEffectsPicker: props.onShowVideoEffectsPicker })),
|
163
|
-
props.mobileView && isEnabled(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton,
|
164
155
|
screenShareButtonIsEnabled && (React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles,
|
165
156
|
/* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */
|
166
|
-
disabled: props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton) })),
|
167
|
-
|
168
|
-
(_b = customButtons['primary']) === null || _b === void 0 ? void 0 :
|
169
|
-
_b.slice(0, props.mobileView
|
157
|
+
disabled: props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton) })), (_a = customButtons['primary']) === null || _a === void 0 ? void 0 :
|
158
|
+
_a.slice(0, props.mobileView
|
170
159
|
? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
|
171
160
|
: CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
|
172
161
|
return (React.createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
|
@@ -184,14 +173,11 @@ export const CommonCallControlBar = (props) => {
|
|
184
173
|
React.createElement(EndCall, { displayType: "compact", styles: endCallButtonStyles }))))))),
|
185
174
|
!props.mobileView && (React.createElement(Stack.Item, null,
|
186
175
|
React.createElement("div", { ref: sidepaneControlsRef },
|
187
|
-
React.createElement(Stack, { horizontal: true, className: !props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined },
|
188
|
-
|
189
|
-
|
190
|
-
_c.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
|
176
|
+
React.createElement(Stack, { horizontal: true, className: !props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined },
|
177
|
+
isEnabled(options === null || options === void 0 ? void 0 : options.peopleButton) && (React.createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "common-call-composite-people-button", disabled: props.disableButtonsForLobbyPage || isDisabled(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles })), (_b = customButtons['secondary']) === null || _b === void 0 ? void 0 :
|
178
|
+
_b.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
|
191
179
|
return (React.createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
|
192
|
-
})
|
193
|
-
isEnabled(options === null || options === void 0 ? void 0 : options.peopleButton) && (React.createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings === null || peopleButtonStrings === void 0 ? void 0 : peopleButtonStrings.label, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "common-call-composite-people-button", disabled: props.disableButtonsForLobbyPage || isDisabled(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles })),
|
194
|
-
isEnabled(options === null || options === void 0 ? void 0 : options.chatButton) && chatButton)))))));
|
180
|
+
}))))))));
|
195
181
|
};
|
196
182
|
const desktopButtonContainerStyle = {
|
197
183
|
padding: '0.75rem',
|
@@ -216,7 +202,8 @@ const wrapperDesktopRtlStyles = {
|
|
216
202
|
right: '50%',
|
217
203
|
transform: 'translate(-50%, 0)'
|
218
204
|
};
|
219
|
-
|
205
|
+
/** @private */
|
206
|
+
export const getDesktopCommonButtonStyles = (theme) => ({
|
220
207
|
root: {
|
221
208
|
border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,
|
222
209
|
borderRadius: theme.effects.roundedCorner4,
|
package/dist/dist-esm/react-composites/src/composites/common/ControlBar/CommonCallControlBar.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CommonCallControlBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useMemo, useRef, useEffect, useState, useCallback } from 'react';\nimport { CallAdapterProvider } from '../../CallComposite/adapter/CallAdapterProvider';\nimport { CallAdapter } from '../../CallComposite';\nimport { PeopleButton } from './PeopleButton';\nimport { concatStyleSets, IStyle, ITheme, mergeStyles, mergeStyleSets, Stack, useTheme } from '@fluentui/react';\nimport { controlBarContainerStyles } from '../../CallComposite/styles/CallControls.styles';\nimport { callControlsContainerStyles } from '../../CallComposite/styles/CallPage.styles';\nimport { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';\nimport { ChatAdapter } from '../../ChatComposite';\nimport { ChatButtonWithUnreadMessagesBadge } from '../../CallWithChatComposite/ChatButtonWithUnreadMessagesBadge';\nimport { BaseCustomStyles, ControlBarButtonStyles } from '@internal/react-components';\nimport { ControlBar } from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '@internal/react-components';\nimport { Microphone } from '../../CallComposite/components/buttons/Microphone';\nimport { Camera } from '../../CallComposite/components/buttons/Camera';\nimport { ScreenShare } from '../../CallComposite/components/buttons/ScreenShare';\nimport { EndCall } from '../../CallComposite/components/buttons/EndCall';\nimport { MoreButton } from '../MoreButton';\nimport { ContainerRectProps } from '../ContainerRectProps';\n/* @conditional-compile-remove(control-bar-button-injection) */\nimport {\n CUSTOM_BUTTON_OPTIONS,\n generateCustomCallControlBarButton,\n onFetchCustomButtonPropsTrampoline\n} from './CustomButton';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { DesktopMoreButton } from './DesktopMoreButton';\nimport { isDisabled } from '../../CallComposite/utils';\nimport { HiddenFocusStartPoint } from '../HiddenFocusStartPoint';\nimport { CallWithChatControlOptions } from '../../CallWithChatComposite';\nimport { CommonCallControlOptions } from '../types/CommonCallControlOptions';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsSettingsModal } from '../CaptionsSettingsModal';\n\n/**\n * @private\n */\nexport interface CommonCallControlBarProps {\n callAdapter: CallAdapter;\n chatButtonChecked?: boolean;\n peopleButtonChecked: boolean;\n onChatButtonClicked?: () => void;\n onPeopleButtonClicked: () => void;\n onMoreButtonClicked?: () => void;\n mobileView: boolean;\n disableButtonsForLobbyPage: boolean;\n callControls?: boolean | CommonCallControlOptions | CallWithChatControlOptions;\n chatAdapter?: ChatAdapter;\n disableButtonsForHoldScreen?: boolean;\n /* @conditional-compile-remove(PSTN-calls) */\n onClickShowDialpad?: () => void;\n /* @conditional-compile-remove(video-background-effects) */\n onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;\n rtl?: boolean;\n /* @conditional-compile-remove(close-captions) */\n isCaptionsSupported?: boolean;\n}\n\nconst inferCommonCallControlOptions = (\n mobileView: boolean,\n commonCallControlOptions?: boolean | CallWithChatControlOptions\n): CallWithChatControlOptions | false => {\n if (commonCallControlOptions === false) {\n return false;\n }\n\n const options =\n commonCallControlOptions === true || commonCallControlOptions === undefined ? {} : commonCallControlOptions;\n if (mobileView) {\n // Set to compressed mode when composite is optimized for mobile\n options.displayType = 'compact';\n // Do not show screen share button when composite is optimized for mobile unless the developer\n // has explicitly opted in.\n if (options.screenShareButton !== true) {\n options.screenShareButton = false;\n }\n }\n return options;\n};\n\n/**\n * @private\n */\nexport const CommonCallControlBar = (props: CommonCallControlBarProps & ContainerRectProps): JSX.Element => {\n const theme = useTheme();\n\n const controlBarContainerRef = useRef<HTMLHeadingElement>(null);\n const sidepaneControlsRef = useRef<HTMLHeadingElement>(null);\n const controlBarSizeRef = useRef<HTMLHeadingElement>(null);\n\n const [controlBarButtonsWidth, setControlBarButtonsWidth] = useState(0);\n const [panelsButtonsWidth, setPanelsButtonsWidth] = useState(0);\n const [controlBarContainerWidth, setControlBarContainerWidth] = useState(0);\n\n const [totalButtonsWidth, setTotalButtonsWidth] = useState(0);\n const [isOutOfSpace, setIsOutOfSpace] = useState(false);\n\n const callWithChatStrings = useCallWithChatCompositeStrings();\n const options = inferCommonCallControlOptions(props.mobileView, props.callControls);\n\n /* @conditional-compile-remove(close-captions) */\n const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = useState(false);\n\n const handleResize = useCallback((): void => {\n setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n }, []);\n\n // on load set inital width\n useEffect(() => {\n setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n }, []);\n\n // get the current width of control bar buttons and panel control buttons when browser size change\n useEffect(() => {\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [handleResize]);\n\n /* when size change, reset total buttons width and compare with the control bar container width\n if the total width of those buttons exceed container width, do not center the control bar buttons based on parent container width\n Instead let them take up the remaining white space on the left */\n useEffect(() => {\n // white space on the left when control bar buttons are centered based on container width + control bar buttons width + panel control buttons width\n setTotalButtonsWidth(\n (controlBarContainerWidth - controlBarButtonsWidth) / 2 + controlBarButtonsWidth + panelsButtonsWidth\n );\n }, [controlBarButtonsWidth, panelsButtonsWidth, controlBarContainerWidth]);\n\n useEffect(() => {\n setIsOutOfSpace(totalButtonsWidth > controlBarContainerWidth);\n }, [totalButtonsWidth, controlBarContainerWidth]);\n\n /* @conditional-compile-remove(close-captions) */\n const openCaptionsSettingsModal = useCallback((): void => {\n setShowCaptionsSettingsModal(true);\n }, []);\n /* @conditional-compile-remove(close-captions) */\n const onDismissCaptionsSettings = useCallback((): void => {\n setShowCaptionsSettingsModal(false);\n }, []);\n\n const chatButtonStrings = useMemo(\n () => ({\n label: callWithChatStrings.chatButtonLabel,\n tooltipOffContent: callWithChatStrings.chatButtonTooltipOpen,\n tooltipOnContent: callWithChatStrings.chatButtonTooltipClose\n }),\n [callWithChatStrings]\n );\n const peopleButtonStrings = useMemo(\n () => ({\n label: callWithChatStrings.peopleButtonLabel,\n tooltipOffContent: callWithChatStrings.peopleButtonTooltipOpen,\n tooltipOnContent: callWithChatStrings.peopleButtonTooltipClose\n }),\n [callWithChatStrings]\n );\n const moreButtonStrings = useMemo(\n () => ({\n label: callWithChatStrings.moreDrawerButtonLabel,\n tooltipContent: callWithChatStrings.moreDrawerButtonTooltip\n }),\n [callWithChatStrings]\n );\n\n const centerContainerStyles = useMemo(() => {\n const styles: BaseCustomStyles = !props.mobileView ? desktopControlBarStyles : {};\n return mergeStyleSets(styles, {\n root: {\n // Enforce a background color on control bar to ensure it matches the composite background color.\n background: theme.semanticColors.bodyBackground\n }\n });\n }, [props.mobileView, theme.semanticColors.bodyBackground]);\n const screenShareButtonStyles = useMemo(\n () => (!props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined),\n [props.mobileView, theme]\n );\n const commonButtonStyles = useMemo(\n () => (!props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined),\n [props.mobileView, theme]\n );\n const endCallButtonStyles = useMemo(\n () => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined),\n [props.mobileView, theme]\n );\n\n const controlBarWrapperDesktopStyles: IStyle = useMemo(\n // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n () => (!props.mobileView && !isOutOfSpace ? (props.rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles) : {}),\n [props.mobileView, props.rtl, isOutOfSpace]\n );\n\n // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n const controlBarDesktopContainerStyles: IStyle = useMemo(\n () => (!props.mobileView && !isOutOfSpace ? { position: 'relative', minHeight: '4.5rem', width: '100%' } : {}),\n [props.mobileView, isOutOfSpace]\n );\n\n /* @conditional-compile-remove(control-bar-button-injection) */\n const customButtons = useMemo(\n () =>\n generateCustomCallControlBarButton(\n onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined),\n options !== false ? options?.displayType : undefined\n ),\n [options]\n );\n\n // when options is false then we want to hide the whole control bar.\n if (options === false) {\n return <></>;\n }\n\n const chatButton = props.chatAdapter ? (\n <ChatButtonWithUnreadMessagesBadge\n chatAdapter={props.chatAdapter}\n checked={props.chatButtonChecked}\n showLabel={options.displayType !== 'compact'}\n isChatPaneVisible={props.chatButtonChecked ?? false}\n onClick={props.onChatButtonClicked}\n disabled={props.disableButtonsForLobbyPage || isDisabled(options.chatButton)}\n strings={chatButtonStrings}\n styles={commonButtonStyles}\n newMessageLabel={callWithChatStrings.chatButtonNewMessageNotificationLabel}\n />\n ) : (\n <></>\n );\n\n /* @conditional-compile-remove(rooms) */\n const rolePermissions = _usePermissions();\n\n let screenShareButtonIsEnabled = isEnabled(options?.screenShareButton);\n /* @conditional-compile-remove(rooms) */\n screenShareButtonIsEnabled = rolePermissions.screenShare && screenShareButtonIsEnabled;\n\n let microphoneButtonIsEnabled = isEnabled(options?.microphoneButton);\n /* @conditional-compile-remove(rooms) */\n microphoneButtonIsEnabled = rolePermissions.microphoneButton && microphoneButtonIsEnabled;\n\n let cameraButtonIsEnabled = isEnabled(options?.cameraButton);\n /* @conditional-compile-remove(rooms) */\n cameraButtonIsEnabled = rolePermissions.cameraButton && cameraButtonIsEnabled;\n\n return (\n <div ref={controlBarSizeRef}>\n <CallAdapterProvider adapter={props.callAdapter}>\n {\n /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal && (\n <CaptionsSettingsModal\n showCaptionsSettingsModal={showCaptionsSettingsModal}\n onDismissCaptionsSettings={onDismissCaptionsSettings}\n />\n )\n }\n </CallAdapterProvider>\n <Stack\n horizontal\n reversed={!props.mobileView && !isOutOfSpace}\n horizontalAlign=\"space-between\"\n className={mergeStyles(\n callControlsContainerStyles,\n controlBarContainerStyles,\n controlBarDesktopContainerStyles\n )}\n >\n <Stack.Item grow className={mergeStyles(controlBarWrapperDesktopStyles)}>\n <CallAdapterProvider adapter={props.callAdapter}>\n <Stack horizontalAlign=\"center\">\n {/*\n HiddenFocusStartPoint is a util component used when we can't ensure the initial element for first\n tab focus is at the top of dom tree. It moves the first-tab focus to the next interact-able element\n immediately after it in the dom tree.\n */}\n <HiddenFocusStartPoint />\n <Stack.Item>\n {/*\n Note: We use the layout=\"horizontal\" instead of dockedBottom because of how we position the\n control bar. The control bar exists in a Stack below the MediaGallery. The MediaGallery is\n set to grow and fill the remaining space not taken up by the ControlBar. If we were to use\n dockedBottom it has position absolute and would therefore float on top of the media gallery,\n occluding some of its content.\n */}\n <div ref={controlBarContainerRef}>\n <ControlBar layout=\"horizontal\" styles={centerContainerStyles}>\n {microphoneButtonIsEnabled && (\n <Microphone\n displayType={options.displayType}\n styles={commonButtonStyles}\n splitButtonsForDeviceSelection={!props.mobileView}\n /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n disabled={props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton)}\n />\n )}\n {cameraButtonIsEnabled && (\n <Camera\n displayType={options.displayType}\n styles={commonButtonStyles}\n splitButtonsForDeviceSelection={!props.mobileView}\n /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n disabled={props.disableButtonsForHoldScreen || isDisabled(options.cameraButton)}\n /* @conditional-compile-remove(video-background-effects) */\n onShowVideoEffectsPicker={props.onShowVideoEffectsPicker}\n />\n )}\n {props.mobileView && isEnabled(options?.chatButton) && chatButton}\n {screenShareButtonIsEnabled && (\n <ScreenShare\n option={options.screenShareButton}\n displayType={options.displayType}\n styles={screenShareButtonStyles}\n /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n disabled={props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton)}\n />\n )}\n {\n /* @conditional-compile-remove(control-bar-button-injection) */\n customButtons['primary']\n ?.slice(\n 0,\n props.mobileView\n ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS\n : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS\n )\n .map((CustomButton, i) => {\n return (\n <CustomButton\n key={`primary-custom-button-${i}`}\n styles={commonButtonStyles}\n showLabel={options.displayType !== 'compact'}\n />\n );\n })\n }\n {props.mobileView && (\n <MoreButton\n data-ui-id=\"common-call-composite-more-button\"\n strings={moreButtonStrings}\n onClick={props.onMoreButtonClicked}\n disabled={props.disableButtonsForLobbyPage}\n />\n )}\n {\n /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled(\n options?.moreButton\n ) &&\n /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled(\n options?.holdButton\n ) &&\n !props.mobileView && (\n <DesktopMoreButton\n disableButtonsForHoldScreen={props.disableButtonsForHoldScreen}\n styles={commonButtonStyles}\n onClickShowDialpad={props.onClickShowDialpad}\n /* @conditional-compile-remove(control-bar-button-injection) */\n callControls={props.callControls}\n /* @conditional-compile-remove(close-captions) */\n isCaptionsSupported={props.isCaptionsSupported}\n /* @conditional-compile-remove(close-captions) */\n onCaptionsSettingsClick={openCaptionsSettingsModal}\n />\n )\n }\n <EndCall displayType=\"compact\" styles={endCallButtonStyles} />\n </ControlBar>\n </div>\n </Stack.Item>\n </Stack>\n </CallAdapterProvider>\n </Stack.Item>\n {!props.mobileView && (\n <Stack.Item>\n <div ref={sidepaneControlsRef}>\n <Stack horizontal className={!props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined}>\n {\n /* @conditional-compile-remove(control-bar-button-injection) */\n customButtons['secondary']\n ?.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS)\n .map((CustomButton, i) => {\n return (\n <CustomButton\n key={`secondary-custom-button-${i}`}\n styles={commonButtonStyles}\n showLabel={options.displayType !== 'compact'}\n />\n );\n })\n }\n {isEnabled(options?.peopleButton) && (\n <PeopleButton\n checked={props.peopleButtonChecked}\n ariaLabel={peopleButtonStrings?.label}\n showLabel={options.displayType !== 'compact'}\n onClick={props.onPeopleButtonClicked}\n data-ui-id=\"common-call-composite-people-button\"\n disabled={props.disableButtonsForLobbyPage || isDisabled(options.peopleButton)}\n strings={peopleButtonStrings}\n styles={commonButtonStyles}\n />\n )}\n {isEnabled(options?.chatButton) && chatButton}\n </Stack>\n </div>\n </Stack.Item>\n )}\n </Stack>\n </div>\n );\n};\n\nconst desktopButtonContainerStyle: IStyle = {\n padding: '0.75rem',\n columnGap: '0.5rem'\n};\n\nconst desktopControlBarStyles: BaseCustomStyles = {\n root: desktopButtonContainerStyle\n};\n\n{\n /*\n Styling here to ensure the control bar buttons stay in the center of the parent component (control Container) regardless of its siblings\n Need to add 'reversed' to parent container because the styling here reverse the position of the two stack items \n */\n}\nconst wrapperDesktopStyles: IStyle = {\n position: 'absolute',\n left: '50%',\n transform: 'translate(-50%, 0)'\n};\n\nconst wrapperDesktopRtlStyles: IStyle = {\n position: 'absolute',\n right: '50%',\n transform: 'translate(-50%, 0)'\n};\n\nconst getDesktopCommonButtonStyles = (theme: ITheme): ControlBarButtonStyles => ({\n root: {\n border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n borderRadius: theme.effects.roundedCorner4,\n minHeight: '2.5rem',\n maxWidth: '12rem' // allot extra space than the regular ControlBarButton. This is to give extra room to have the icon beside the text.\n },\n flexContainer: {\n display: 'flex',\n flexFlow: 'row nowrap'\n },\n textContainer: {\n // Override the default so that label doesn't introduce a new block.\n display: 'inline',\n\n // Ensure width is set to permit child to show ellipsis when there is a label that is too long\n maxWidth: '100%'\n },\n label: {\n fontSize: theme.fonts.medium.fontSize,\n\n // Ensure there is enough space between the icon and text to allow for the unread messages badge in the chat button\n marginLeft: '0.625rem',\n\n // Ensure letters that go above and below the standard text line like 'g', 'y', 'j' are not clipped\n lineHeight: '1.5rem',\n\n // Do not allow very long button texts to ruin the control bar experience, instead ensure long text is truncated and shows ellipsis\n display: 'block',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden'\n },\n splitButtonMenuButton: {\n border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n borderTopRightRadius: theme.effects.roundedCorner4,\n borderBottomRightRadius: theme.effects.roundedCorner4,\n borderTopLeftRadius: '0',\n borderBottomLeftRadius: '0'\n },\n splitButtonMenuButtonChecked: {\n // Default colors the menu half similarly for :hover and when button is checked.\n // To align with how the left-half is styled, override the checked style.\n background: 'none'\n }\n});\n\nconst getDesktopScreenShareButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n const overrideStyles = {\n border: 'none',\n background: theme.palette.themePrimary,\n color: theme.palette.white,\n '* > svg': { fill: theme.palette.white },\n '@media (forced-colors: active)': {\n border: '1px solid',\n borderColor: theme.palette.black\n }\n };\n const overrides: ControlBarButtonStyles = {\n rootChecked: overrideStyles,\n rootCheckedHovered: overrideStyles\n };\n return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\n\nconst getDesktopEndCallButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n const overrides: ControlBarButtonStyles = {\n root: {\n // Suppress border around the dark-red button.\n border: 'none'\n },\n rootFocused: {\n '@media (forced-colors: active)': {\n background: 'highlight',\n border: '1px solid'\n }\n },\n icon: {\n '@media (forced-colors: active)': {\n ':focused': {\n color: theme.palette.white\n }\n }\n }\n };\n return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\n\nconst isEnabled = (option: unknown): boolean => option !== false;\n\"../../../../../react-components/src\""]}
|
1
|
+
{"version":3,"file":"CommonCallControlBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport React, { useMemo, useRef, useEffect, useState, useCallback } from 'react';\nimport { CallAdapterProvider } from '../../CallComposite/adapter/CallAdapterProvider';\nimport { CallAdapter } from '../../CallComposite';\nimport { PeopleButton } from './PeopleButton';\nimport { concatStyleSets, IStyle, ITheme, mergeStyles, mergeStyleSets, Stack, useTheme } from '@fluentui/react';\nimport { controlBarContainerStyles } from '../../CallComposite/styles/CallControls.styles';\nimport { callControlsContainerStyles } from '../../CallComposite/styles/CallPage.styles';\nimport { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';\nimport { BaseCustomStyles, ControlBarButtonStyles } from '@internal/react-components';\nimport { ControlBar } from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _usePermissions } from '@internal/react-components';\nimport { Microphone } from '../../CallComposite/components/buttons/Microphone';\nimport { Camera } from '../../CallComposite/components/buttons/Camera';\nimport { ScreenShare } from '../../CallComposite/components/buttons/ScreenShare';\nimport { EndCall } from '../../CallComposite/components/buttons/EndCall';\nimport { MoreButton } from '../MoreButton';\nimport { ContainerRectProps } from '../ContainerRectProps';\nimport {\n CUSTOM_BUTTON_OPTIONS,\n generateCustomCallControlBarButton,\n onFetchCustomButtonPropsTrampoline\n} from './CustomButton';\n/*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\nimport { DesktopMoreButton } from './DesktopMoreButton';\nimport { isDisabled } from '../../CallComposite/utils';\nimport { HiddenFocusStartPoint } from '../HiddenFocusStartPoint';\nimport { CallWithChatControlOptions } from '../../CallWithChatComposite';\nimport { CommonCallControlOptions } from '../types/CommonCallControlOptions';\n/* @conditional-compile-remove(close-captions) */\nimport { CaptionsSettingsModal } from '../CaptionsSettingsModal';\n\n/**\n * @private\n */\nexport interface CommonCallControlBarProps {\n callAdapter: CallAdapter;\n peopleButtonChecked: boolean;\n onPeopleButtonClicked: () => void;\n onMoreButtonClicked?: () => void;\n mobileView: boolean;\n disableButtonsForLobbyPage: boolean;\n callControls?: boolean | CommonCallControlOptions | CallWithChatControlOptions;\n disableButtonsForHoldScreen?: boolean;\n /* @conditional-compile-remove(PSTN-calls) */\n onClickShowDialpad?: () => void;\n /* @conditional-compile-remove(video-background-effects) */\n onShowVideoEffectsPicker?: (showVideoEffectsOptions: boolean) => void;\n /* @conditional-compile-remove(close-captions) */\n isCaptionsSupported?: boolean;\n}\n\nconst inferCommonCallControlOptions = (\n mobileView: boolean,\n commonCallControlOptions?: boolean | CallWithChatControlOptions\n): CallWithChatControlOptions | false => {\n if (commonCallControlOptions === false) {\n return false;\n }\n\n const options =\n commonCallControlOptions === true || commonCallControlOptions === undefined ? {} : commonCallControlOptions;\n if (mobileView) {\n // Set to compressed mode when composite is optimized for mobile\n options.displayType = 'compact';\n // Do not show screen share button when composite is optimized for mobile unless the developer\n // has explicitly opted in.\n if (options.screenShareButton !== true) {\n options.screenShareButton = false;\n }\n }\n return options;\n};\n\n/**\n * @private\n */\nexport const CommonCallControlBar = (props: CommonCallControlBarProps & ContainerRectProps): JSX.Element => {\n const theme = useTheme();\n const rtl = theme.rtl;\n\n const controlBarContainerRef = useRef<HTMLHeadingElement>(null);\n const sidepaneControlsRef = useRef<HTMLHeadingElement>(null);\n const controlBarSizeRef = useRef<HTMLHeadingElement>(null);\n\n const [controlBarButtonsWidth, setControlBarButtonsWidth] = useState(0);\n const [panelsButtonsWidth, setPanelsButtonsWidth] = useState(0);\n const [controlBarContainerWidth, setControlBarContainerWidth] = useState(0);\n\n const [totalButtonsWidth, setTotalButtonsWidth] = useState(0);\n const [isOutOfSpace, setIsOutOfSpace] = useState(false);\n\n const callWithChatStrings = useCallWithChatCompositeStrings();\n const options = inferCommonCallControlOptions(props.mobileView, props.callControls);\n\n /* @conditional-compile-remove(close-captions) */\n const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = useState(false);\n\n const handleResize = useCallback((): void => {\n setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n }, []);\n\n // on load set inital width\n useEffect(() => {\n setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);\n setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);\n setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);\n }, []);\n\n // get the current width of control bar buttons and panel control buttons when browser size change\n useEffect(() => {\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [handleResize]);\n\n /* when size change, reset total buttons width and compare with the control bar container width\n if the total width of those buttons exceed container width, do not center the control bar buttons based on parent container width\n Instead let them take up the remaining white space on the left */\n useEffect(() => {\n // white space on the left when control bar buttons are centered based on container width + control bar buttons width + panel control buttons width\n setTotalButtonsWidth(\n (controlBarContainerWidth - controlBarButtonsWidth) / 2 + controlBarButtonsWidth + panelsButtonsWidth\n );\n }, [controlBarButtonsWidth, panelsButtonsWidth, controlBarContainerWidth]);\n\n useEffect(() => {\n setIsOutOfSpace(totalButtonsWidth > controlBarContainerWidth);\n }, [totalButtonsWidth, controlBarContainerWidth]);\n\n /* @conditional-compile-remove(close-captions) */\n const openCaptionsSettingsModal = useCallback((): void => {\n setShowCaptionsSettingsModal(true);\n }, []);\n /* @conditional-compile-remove(close-captions) */\n const onDismissCaptionsSettings = useCallback((): void => {\n setShowCaptionsSettingsModal(false);\n }, []);\n const peopleButtonStrings = useMemo(\n () => ({\n label: callWithChatStrings.peopleButtonLabel,\n tooltipOffContent: callWithChatStrings.peopleButtonTooltipOpen,\n tooltipOnContent: callWithChatStrings.peopleButtonTooltipClose\n }),\n [callWithChatStrings]\n );\n const moreButtonStrings = useMemo(\n () => ({\n label: callWithChatStrings.moreDrawerButtonLabel,\n tooltipContent: callWithChatStrings.moreDrawerButtonTooltip\n }),\n [callWithChatStrings]\n );\n\n const centerContainerStyles = useMemo(() => {\n const styles: BaseCustomStyles = !props.mobileView ? desktopControlBarStyles : {};\n return mergeStyleSets(styles, {\n root: {\n // Enforce a background color on control bar to ensure it matches the composite background color.\n background: theme.semanticColors.bodyBackground\n }\n });\n }, [props.mobileView, theme.semanticColors.bodyBackground]);\n const screenShareButtonStyles = useMemo(\n () => (!props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined),\n [props.mobileView, theme]\n );\n const commonButtonStyles = useMemo(\n () => (!props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined),\n [props.mobileView, theme]\n );\n const endCallButtonStyles = useMemo(\n () => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined),\n [props.mobileView, theme]\n );\n\n const controlBarWrapperDesktopStyles: IStyle = useMemo(\n // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n () => (!props.mobileView && !isOutOfSpace ? (rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles) : {}),\n [props.mobileView, rtl, isOutOfSpace]\n );\n\n // only center control bar buttons based on parent container if there are enough space on the screen and not mobile\n const controlBarDesktopContainerStyles: IStyle = useMemo(\n () => (!props.mobileView && !isOutOfSpace ? { position: 'relative', minHeight: '4.5rem', width: '100%' } : {}),\n [props.mobileView, isOutOfSpace]\n );\n\n const customButtons = useMemo(\n () =>\n generateCustomCallControlBarButton(\n onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined),\n options !== false ? options?.displayType : undefined\n ),\n [options]\n );\n\n // when options is false then we want to hide the whole control bar.\n if (options === false) {\n return <></>;\n }\n\n /* @conditional-compile-remove(rooms) */\n const rolePermissions = _usePermissions();\n\n let screenShareButtonIsEnabled = isEnabled(options?.screenShareButton);\n /* @conditional-compile-remove(rooms) */\n screenShareButtonIsEnabled = rolePermissions.screenShare && screenShareButtonIsEnabled;\n\n let microphoneButtonIsEnabled = isEnabled(options?.microphoneButton);\n /* @conditional-compile-remove(rooms) */\n microphoneButtonIsEnabled = rolePermissions.microphoneButton && microphoneButtonIsEnabled;\n\n let cameraButtonIsEnabled = isEnabled(options?.cameraButton);\n /* @conditional-compile-remove(rooms) */\n cameraButtonIsEnabled = rolePermissions.cameraButton && cameraButtonIsEnabled;\n\n return (\n <div ref={controlBarSizeRef}>\n <CallAdapterProvider adapter={props.callAdapter}>\n {\n /* @conditional-compile-remove(close-captions) */ showCaptionsSettingsModal && (\n <CaptionsSettingsModal\n showCaptionsSettingsModal={showCaptionsSettingsModal}\n onDismissCaptionsSettings={onDismissCaptionsSettings}\n />\n )\n }\n </CallAdapterProvider>\n <Stack\n horizontal\n reversed={!props.mobileView && !isOutOfSpace}\n horizontalAlign=\"space-between\"\n className={mergeStyles(\n callControlsContainerStyles,\n controlBarContainerStyles,\n controlBarDesktopContainerStyles\n )}\n >\n <Stack.Item grow className={mergeStyles(controlBarWrapperDesktopStyles)}>\n <CallAdapterProvider adapter={props.callAdapter}>\n <Stack horizontalAlign=\"center\">\n {/*\n HiddenFocusStartPoint is a util component used when we can't ensure the initial element for first\n tab focus is at the top of dom tree. It moves the first-tab focus to the next interact-able element\n immediately after it in the dom tree.\n */}\n <HiddenFocusStartPoint />\n <Stack.Item>\n {/*\n Note: We use the layout=\"horizontal\" instead of dockedBottom because of how we position the\n control bar. The control bar exists in a Stack below the MediaGallery. The MediaGallery is\n set to grow and fill the remaining space not taken up by the ControlBar. If we were to use\n dockedBottom it has position absolute and would therefore float on top of the media gallery,\n occluding some of its content.\n */}\n <div ref={controlBarContainerRef}>\n <ControlBar layout=\"horizontal\" styles={centerContainerStyles}>\n {microphoneButtonIsEnabled && (\n <Microphone\n displayType={options.displayType}\n styles={commonButtonStyles}\n splitButtonsForDeviceSelection={!props.mobileView}\n /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n disabled={props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton)}\n />\n )}\n {cameraButtonIsEnabled && (\n <Camera\n displayType={options.displayType}\n styles={commonButtonStyles}\n splitButtonsForDeviceSelection={!props.mobileView}\n /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n disabled={props.disableButtonsForHoldScreen || isDisabled(options.cameraButton)}\n /* @conditional-compile-remove(video-background-effects) */\n onShowVideoEffectsPicker={props.onShowVideoEffectsPicker}\n />\n )}\n {screenShareButtonIsEnabled && (\n <ScreenShare\n option={options.screenShareButton}\n displayType={options.displayType}\n styles={screenShareButtonStyles}\n /* @conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */\n disabled={props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton)}\n />\n )}\n {customButtons['primary']\n ?.slice(\n 0,\n props.mobileView\n ? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS\n : CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS\n )\n .map((CustomButton, i) => {\n return (\n <CustomButton\n key={`primary-custom-button-${i}`}\n styles={commonButtonStyles}\n showLabel={options.displayType !== 'compact'}\n />\n );\n })}\n {props.mobileView && (\n <MoreButton\n data-ui-id=\"common-call-composite-more-button\"\n strings={moreButtonStrings}\n onClick={props.onMoreButtonClicked}\n disabled={props.disableButtonsForLobbyPage}\n />\n )}\n {\n /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled(\n options?.moreButton\n ) &&\n /*@conditional-compile-remove(PSTN-calls) */ /* @conditional-compile-remove(one-to-n-calling) */ isEnabled(\n options?.holdButton\n ) &&\n !props.mobileView && (\n <DesktopMoreButton\n disableButtonsForHoldScreen={props.disableButtonsForHoldScreen}\n styles={commonButtonStyles}\n onClickShowDialpad={props.onClickShowDialpad}\n /* @conditional-compile-remove(control-bar-button-injection) */\n callControls={props.callControls}\n /* @conditional-compile-remove(close-captions) */\n isCaptionsSupported={props.isCaptionsSupported}\n /* @conditional-compile-remove(close-captions) */\n onCaptionsSettingsClick={openCaptionsSettingsModal}\n />\n )\n }\n <EndCall displayType=\"compact\" styles={endCallButtonStyles} />\n </ControlBar>\n </div>\n </Stack.Item>\n </Stack>\n </CallAdapterProvider>\n </Stack.Item>\n {!props.mobileView && (\n <Stack.Item>\n <div ref={sidepaneControlsRef}>\n <Stack horizontal className={!props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined}>\n {isEnabled(options?.peopleButton) && (\n <PeopleButton\n checked={props.peopleButtonChecked}\n ariaLabel={peopleButtonStrings?.label}\n showLabel={options.displayType !== 'compact'}\n onClick={props.onPeopleButtonClicked}\n data-ui-id=\"common-call-composite-people-button\"\n disabled={props.disableButtonsForLobbyPage || isDisabled(options.peopleButton)}\n strings={peopleButtonStrings}\n styles={commonButtonStyles}\n />\n )}\n {customButtons['secondary']\n ?.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS)\n .map((CustomButton, i) => {\n return (\n <CustomButton\n key={`secondary-custom-button-${i}`}\n styles={commonButtonStyles}\n showLabel={options.displayType !== 'compact'}\n />\n );\n })}\n </Stack>\n </div>\n </Stack.Item>\n )}\n </Stack>\n </div>\n );\n};\n\nconst desktopButtonContainerStyle: IStyle = {\n padding: '0.75rem',\n columnGap: '0.5rem'\n};\n\nconst desktopControlBarStyles: BaseCustomStyles = {\n root: desktopButtonContainerStyle\n};\n\n{\n /*\n Styling here to ensure the control bar buttons stay in the center of the parent component (control Container) regardless of its siblings\n Need to add 'reversed' to parent container because the styling here reverse the position of the two stack items \n */\n}\nconst wrapperDesktopStyles: IStyle = {\n position: 'absolute',\n left: '50%',\n transform: 'translate(-50%, 0)'\n};\n\nconst wrapperDesktopRtlStyles: IStyle = {\n position: 'absolute',\n right: '50%',\n transform: 'translate(-50%, 0)'\n};\n\n/** @private */\nexport const getDesktopCommonButtonStyles = (theme: ITheme): ControlBarButtonStyles => ({\n root: {\n border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n borderRadius: theme.effects.roundedCorner4,\n minHeight: '2.5rem',\n maxWidth: '12rem' // allot extra space than the regular ControlBarButton. This is to give extra room to have the icon beside the text.\n },\n flexContainer: {\n display: 'flex',\n flexFlow: 'row nowrap'\n },\n textContainer: {\n // Override the default so that label doesn't introduce a new block.\n display: 'inline',\n\n // Ensure width is set to permit child to show ellipsis when there is a label that is too long\n maxWidth: '100%'\n },\n label: {\n fontSize: theme.fonts.medium.fontSize,\n\n // Ensure there is enough space between the icon and text to allow for the unread messages badge in the chat button\n marginLeft: '0.625rem',\n\n // Ensure letters that go above and below the standard text line like 'g', 'y', 'j' are not clipped\n lineHeight: '1.5rem',\n\n // Do not allow very long button texts to ruin the control bar experience, instead ensure long text is truncated and shows ellipsis\n display: 'block',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden'\n },\n splitButtonMenuButton: {\n border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,\n borderTopRightRadius: theme.effects.roundedCorner4,\n borderBottomRightRadius: theme.effects.roundedCorner4,\n borderTopLeftRadius: '0',\n borderBottomLeftRadius: '0'\n },\n splitButtonMenuButtonChecked: {\n // Default colors the menu half similarly for :hover and when button is checked.\n // To align with how the left-half is styled, override the checked style.\n background: 'none'\n }\n});\n\nconst getDesktopScreenShareButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n const overrideStyles = {\n border: 'none',\n background: theme.palette.themePrimary,\n color: theme.palette.white,\n '* > svg': { fill: theme.palette.white },\n '@media (forced-colors: active)': {\n border: '1px solid',\n borderColor: theme.palette.black\n }\n };\n const overrides: ControlBarButtonStyles = {\n rootChecked: overrideStyles,\n rootCheckedHovered: overrideStyles\n };\n return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\n\nconst getDesktopEndCallButtonStyles = (theme: ITheme): ControlBarButtonStyles => {\n const overrides: ControlBarButtonStyles = {\n root: {\n // Suppress border around the dark-red button.\n border: 'none'\n },\n rootFocused: {\n '@media (forced-colors: active)': {\n background: 'highlight',\n border: '1px solid'\n }\n },\n icon: {\n '@media (forced-colors: active)': {\n ':focused': {\n color: theme.palette.white\n }\n }\n }\n };\n return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);\n};\n\nconst isEnabled = (option: unknown): boolean => option !== false;\n\"../../../../../react-components/src\""]}
|
@@ -30,6 +30,9 @@ const generateCustomControlBarButtons = (placement, customButtons) => customButt
|
|
30
30
|
.filter((buttonProps) => buttonProps.placement === placement)
|
31
31
|
.map((buttonProps, i) => (internalProps) => {
|
32
32
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
33
|
+
if (buttonProps['onRenderButton']) {
|
34
|
+
return buttonProps['onRenderButton'](internalProps);
|
35
|
+
}
|
33
36
|
return (React.createElement(ControlBarButton, { ariaDescription: (_a = buttonProps.ariaDescription) !== null && _a !== void 0 ? _a : internalProps.ariaDescription, ariaLabel: (_b = buttonProps.ariaLabel) !== null && _b !== void 0 ? _b : internalProps.ariaLabel, disabled: (_c = buttonProps.disabled) !== null && _c !== void 0 ? _c : internalProps.disabled, id: (_d = buttonProps.id) !== null && _d !== void 0 ? _d : internalProps.id, key: (_e = buttonProps.key) !== null && _e !== void 0 ? _e : `${buttonProps.placement}_${i}`, onClick: (_f = buttonProps.onItemClick) !== null && _f !== void 0 ? _f : internalProps.onClick, onRenderIcon: () => {
|
34
37
|
var _a, _b, _c;
|
35
38
|
return (React.createElement(Icon, { iconName: (_c = (_a = buttonProps.iconName) !== null && _a !== void 0 ? _a : (_b = internalProps.iconProps) === null || _b === void 0 ? void 0 : _b.iconName) !== null && _c !== void 0 ? _c : 'ControlButtonOptions' }));
|
@@ -71,11 +74,11 @@ export const drawerMenuItemToContextualMenuItem = (item) => (Object.assign(Objec
|
|
71
74
|
items: item.subMenuProps.map(drawerMenuItemToContextualMenuItem)
|
72
75
|
}
|
73
76
|
: undefined }));
|
74
|
-
/* @conditional-compile-remove(control-bar-button-injection) */
|
75
77
|
/** @private */
|
76
78
|
export const onFetchCustomButtonPropsTrampoline = (options) => {
|
79
|
+
var _a;
|
77
80
|
let response = undefined;
|
78
|
-
response = options === null ||
|
81
|
+
response = (_a = options) === null || _a === void 0 ? void 0 : _a.onFetchCustomButtonProps;
|
79
82
|
return response;
|
80
83
|
};
|
81
84
|
//# sourceMappingURL=CustomButton.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CustomButton.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/ControlBar/CustomButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// eslint-disable-next-line no-restricted-imports\nimport { Icon, IContextualMenuItem, mergeStyleSets } from '@fluentui/react';\nimport { ControlBarButton, _DrawerMenuItemProps } from '@internal/react-components';\nimport React from 'react';\nimport { CustomCallControlButtonCallbackArgs, CustomControlButtonProps } from '../types/CommonCallControlOptions';\nimport { CallControlDisplayType } from '../types/CommonCallControlOptions';\n/* @conditional-compile-remove(control-bar-button-injection) */\nimport { CommonCallControlOptions } from '../types/CommonCallControlOptions';\n\n/**\n * Max number of Custom Buttons in primary and secondary ControlBar\n * Does not include existing buttons in the controlBar.\n *\n * @private\n */\nexport const CUSTOM_BUTTON_OPTIONS = {\n MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS: 3,\n MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS: 1,\n MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS: 2\n};\n\n/** @private */\nexport type CustomButtons = {\n [key in CustomCallControlButtonPlacement]: typeof ControlBarButton[] | undefined;\n};\n\n/** @private */\nexport const generateCustomCallControlBarButton = (\n onFetchCustomButtonProps?: CustomCallControlButtonCallback[],\n displayType?: CallControlDisplayType\n): CustomButtons => {\n const allButtonProps = onFetchCustomButtonProps?.map((callback) => callback({ displayType }));\n\n return {\n primary: generateCustomControlBarButtons('primary', allButtonProps),\n secondary: generateCustomControlBarButtons('secondary', allButtonProps),\n overflow: generateCustomControlBarButtons('overflow', allButtonProps)\n };\n};\n\n/** @private */\nconst generateCustomControlBarButtons = (\n placement: CustomCallControlButtonPlacement,\n customButtons?: CustomCallControlButtonProps[]\n): typeof ControlBarButton[] =>\n customButtons\n ? customButtons\n .filter((buttonProps) => buttonProps.placement === placement)\n .map((buttonProps, i) => (internalProps) => (\n <ControlBarButton\n ariaDescription={buttonProps.ariaDescription ?? internalProps.ariaDescription}\n ariaLabel={buttonProps.ariaLabel ?? internalProps.ariaLabel}\n disabled={buttonProps.disabled ?? internalProps.disabled}\n id={buttonProps.id ?? internalProps.id}\n key={buttonProps.key ?? `${buttonProps.placement}_${i}`}\n onClick={buttonProps.onItemClick ?? internalProps.onClick}\n onRenderIcon={() => (\n <Icon iconName={buttonProps.iconName ?? internalProps.iconProps?.iconName ?? 'ControlButtonOptions'} />\n )}\n showLabel={buttonProps.showLabel ?? internalProps.showLabel}\n text={buttonProps.text ?? internalProps.text}\n styles={mergeStyleSets(internalProps.styles, buttonProps.styles)}\n />\n ))\n : [];\n\n/** @private */\nconst generateCustomDrawerButtons = (\n placement: CustomCallControlButtonPlacement,\n customButtons?: CustomCallControlButtonProps[]\n): _DrawerMenuItemProps[] =>\n customButtons\n ? customButtons\n .filter((buttonProps) => buttonProps.placement === placement)\n .map(\n (buttonProps, i): _DrawerMenuItemProps => ({\n ...buttonProps,\n disabled: buttonProps.disabled,\n iconProps: { iconName: buttonProps.iconName },\n id: buttonProps.id,\n itemKey: buttonProps.key ? '' + buttonProps.key : `${buttonProps.placement}_${i}`,\n onItemClick: buttonProps.onItemClick,\n text: buttonProps.text\n })\n )\n : [];\n\n/** @private */\nexport type CustomDrawerButtons = {\n [key in CustomCallControlButtonPlacement]: _DrawerMenuItemProps[];\n};\n\n/** @private */\nexport const generateCustomCallDrawerButtons = (\n onFetchCustomButtonProps?: CustomCallControlButtonCallback[],\n displayType?: CallControlDisplayType\n): CustomDrawerButtons => {\n const customButtons = onFetchCustomButtonProps?.map((callback) => callback({ displayType }));\n return {\n primary: generateCustomDrawerButtons('primary', customButtons),\n secondary: generateCustomDrawerButtons('secondary', customButtons),\n overflow: generateCustomDrawerButtons('overflow', customButtons)\n };\n};\n\n/** @private */\nexport type CustomDesktopOverflowButtons = {\n [key in CustomCallControlButtonPlacement]: IContextualMenuItem[];\n};\n\n/** @private */\nexport const generateCustomCallDesktopOverflowButtons = (\n onFetchCustomButtonProps?: CustomCallControlButtonCallback[],\n displayType?: CallControlDisplayType\n): CustomDesktopOverflowButtons => {\n const customButtons = onFetchCustomButtonProps?.map((callback) => callback({ displayType }));\n return {\n primary: generateCustomDrawerButtons('primary', customButtons).map(drawerMenuItemToContextualMenuItem),\n secondary: generateCustomDrawerButtons('secondary', customButtons).map(drawerMenuItemToContextualMenuItem),\n overflow: generateCustomDrawerButtons('overflow', customButtons).map(drawerMenuItemToContextualMenuItem)\n };\n};\n\n/** @private */\nexport const drawerMenuItemToContextualMenuItem = (item: _DrawerMenuItemProps): IContextualMenuItem => ({\n ...item,\n key: item.itemKey,\n onClick: item.onItemClick\n ? (ev) => {\n item.onItemClick?.(ev);\n }\n : undefined,\n subMenuProps: item.subMenuProps\n ? {\n items: item.subMenuProps.map(drawerMenuItemToContextualMenuItem)\n }\n : undefined\n});\n\n/**\n * A callback that returns the props to render a custom {@link ControlBarButton} and {@link DrawerMenuItem}.\n *\n * The response indicates where the custom button should be placed.\n *\n * Performance tip: This callback is only called when either the callback or its arguments change.\n * @beta\n */\nexport type CustomCallControlButtonCallback = (\n args: CustomCallControlButtonCallbackArgs\n) => CustomCallControlButtonProps;\n\n/**\n * Placement for a custom button injected in the {@link CommonCallControlBar}.\n *\n * 'primary': Place the button(s) on the right end of the center control bar but before the EndCallButton (left end in rtl mode).\n * 'overflow': Place the buttons(s) on the end of the overflow Menu.\n * 'secondary': Place the button(s) on the left end of the side control bar (right in rtl mode).\n *\n * Multiple buttons assigned the same placement are appended in order.\n * E.g., if two buttons are placed in 'secondary', they'll both appear on the left end (right end in rtl mode)\n * in the order provided.\n *\n * Only 'primary' placement works when legacy call control is enabled in call composite\n *\n * @beta\n */\nexport type CustomCallControlButtonPlacement = 'primary' | 'overflow' | 'secondary';\n\n/**\n * Response from {@link CustomCallControlButtonCallback}.\n *\n * Includes the icon and placement prop necessary to indicate where to place the\n * {@link ControlBarButton} and a {@link DrawerMenuItem}\n *\n * @beta\n */\nexport interface CustomCallControlButtonProps extends CustomControlButtonProps {\n /**\n * Where to place the custom button relative to other buttons.\n */\n placement: CustomCallControlButtonPlacement;\n /**\n * Icon to render. Icon is a non-default icon name that needs to be registered as a\n * custom icon using registerIcons through fluentui. Examples include icons from the fluentui library\n */\n iconName?: string;\n}\n\n/* @conditional-compile-remove(control-bar-button-injection) */\n/** @private */\nexport const onFetchCustomButtonPropsTrampoline = (\n options?: CommonCallControlOptions\n): CustomCallControlButtonCallback[] | undefined => {\n let response: CustomCallControlButtonCallback[] | undefined = undefined;\n response = options?.onFetchCustomButtonProps;\n return response;\n};\n\"../../../../../react-components/src\""]}
|
1
|
+
{"version":3,"file":"CustomButton.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/common/ControlBar/CustomButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\n// eslint-disable-next-line no-restricted-imports\nimport { Icon, IContextualMenuItem, mergeStyleSets } from '@fluentui/react';\nimport { ControlBarButton, _DrawerMenuItemProps } from '@internal/react-components';\nimport React from 'react';\nimport {\n _CommonCallControlOptions,\n CustomCallControlButtonCallbackArgs,\n CustomControlButtonProps\n} from '../types/CommonCallControlOptions';\nimport { CallControlDisplayType } from '../types/CommonCallControlOptions';\nimport { CommonCallControlOptions } from '../types/CommonCallControlOptions';\n\n/**\n * Max number of Custom Buttons in primary and secondary ControlBar\n * Does not include existing buttons in the controlBar.\n *\n * @private\n */\nexport const CUSTOM_BUTTON_OPTIONS = {\n MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS: 3,\n MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS: 1,\n MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS: 2\n};\n\n/** @private */\nexport type CustomButtons = {\n [key in CustomCallControlButtonPlacement]: typeof ControlBarButton[] | undefined;\n};\n\n/** @private */\nexport const generateCustomCallControlBarButton = (\n onFetchCustomButtonProps?: CustomCallControlButtonCallback[],\n displayType?: CallControlDisplayType\n): CustomButtons => {\n const allButtonProps = onFetchCustomButtonProps?.map((callback) => callback({ displayType }));\n\n return {\n primary: generateCustomControlBarButtons('primary', allButtonProps),\n secondary: generateCustomControlBarButtons('secondary', allButtonProps),\n overflow: generateCustomControlBarButtons('overflow', allButtonProps)\n };\n};\n\n/** @private */\nconst generateCustomControlBarButtons = (\n placement: CustomCallControlButtonPlacement,\n customButtons?: CustomCallControlButtonProps[]\n): typeof ControlBarButton[] =>\n customButtons\n ? customButtons\n .filter((buttonProps) => buttonProps.placement === placement)\n .map((buttonProps, i) => (internalProps) => {\n if (buttonProps['onRenderButton']) {\n return buttonProps['onRenderButton'](internalProps);\n }\n return (\n <ControlBarButton\n ariaDescription={buttonProps.ariaDescription ?? internalProps.ariaDescription}\n ariaLabel={buttonProps.ariaLabel ?? internalProps.ariaLabel}\n disabled={buttonProps.disabled ?? internalProps.disabled}\n id={buttonProps.id ?? internalProps.id}\n key={buttonProps.key ?? `${buttonProps.placement}_${i}`}\n onClick={buttonProps.onItemClick ?? internalProps.onClick}\n onRenderIcon={() => (\n <Icon iconName={buttonProps.iconName ?? internalProps.iconProps?.iconName ?? 'ControlButtonOptions'} />\n )}\n showLabel={buttonProps.showLabel ?? internalProps.showLabel}\n text={buttonProps.text ?? internalProps.text}\n styles={mergeStyleSets(internalProps.styles, buttonProps.styles)}\n />\n );\n })\n : [];\n\n/** @private */\nconst generateCustomDrawerButtons = (\n placement: CustomCallControlButtonPlacement,\n customButtons?: CustomCallControlButtonProps[]\n): _DrawerMenuItemProps[] =>\n customButtons\n ? customButtons\n .filter((buttonProps) => buttonProps.placement === placement)\n .map(\n (buttonProps, i): _DrawerMenuItemProps => ({\n ...buttonProps,\n disabled: buttonProps.disabled,\n iconProps: { iconName: buttonProps.iconName },\n id: buttonProps.id,\n itemKey: buttonProps.key ? '' + buttonProps.key : `${buttonProps.placement}_${i}`,\n onItemClick: buttonProps.onItemClick,\n text: buttonProps.text\n })\n )\n : [];\n\n/** @private */\nexport type CustomDrawerButtons = {\n [key in CustomCallControlButtonPlacement]: _DrawerMenuItemProps[];\n};\n\n/** @private */\nexport const generateCustomCallDrawerButtons = (\n onFetchCustomButtonProps?: CustomCallControlButtonCallback[],\n displayType?: CallControlDisplayType\n): CustomDrawerButtons => {\n const customButtons = onFetchCustomButtonProps?.map((callback) => callback({ displayType }));\n return {\n primary: generateCustomDrawerButtons('primary', customButtons),\n secondary: generateCustomDrawerButtons('secondary', customButtons),\n overflow: generateCustomDrawerButtons('overflow', customButtons)\n };\n};\n\n/** @private */\nexport type CustomDesktopOverflowButtons = {\n [key in CustomCallControlButtonPlacement]: IContextualMenuItem[];\n};\n\n/** @private */\nexport const generateCustomCallDesktopOverflowButtons = (\n onFetchCustomButtonProps?: CustomCallControlButtonCallback[],\n displayType?: CallControlDisplayType\n): CustomDesktopOverflowButtons => {\n const customButtons = onFetchCustomButtonProps?.map((callback) => callback({ displayType }));\n return {\n primary: generateCustomDrawerButtons('primary', customButtons).map(drawerMenuItemToContextualMenuItem),\n secondary: generateCustomDrawerButtons('secondary', customButtons).map(drawerMenuItemToContextualMenuItem),\n overflow: generateCustomDrawerButtons('overflow', customButtons).map(drawerMenuItemToContextualMenuItem)\n };\n};\n\n/** @private */\nexport const drawerMenuItemToContextualMenuItem = (item: _DrawerMenuItemProps): IContextualMenuItem => ({\n ...item,\n key: item.itemKey,\n onClick: item.onItemClick\n ? (ev) => {\n item.onItemClick?.(ev);\n }\n : undefined,\n subMenuProps: item.subMenuProps\n ? {\n items: item.subMenuProps.map(drawerMenuItemToContextualMenuItem)\n }\n : undefined\n});\n\n/**\n * A callback that returns the props to render a custom {@link ControlBarButton} and {@link DrawerMenuItem}.\n *\n * The response indicates where the custom button should be placed.\n *\n * Performance tip: This callback is only called when either the callback or its arguments change.\n * @beta\n */\nexport type CustomCallControlButtonCallback = (\n args: CustomCallControlButtonCallbackArgs\n) => CustomCallControlButtonProps;\n\n/**\n * Placement for a custom button injected in the {@link CommonCallControlBar}.\n *\n * 'primary': Place the button(s) on the right end of the center control bar but before the EndCallButton (left end in rtl mode).\n * 'overflow': Place the buttons(s) on the end of the overflow Menu.\n * 'secondary': Place the button(s) on the left end of the side control bar (right in rtl mode).\n *\n * Multiple buttons assigned the same placement are appended in order.\n * E.g., if two buttons are placed in 'secondary', they'll both appear on the left end (right end in rtl mode)\n * in the order provided.\n *\n * Only 'primary' placement works when legacy call control is enabled in call composite\n *\n * @beta\n */\nexport type CustomCallControlButtonPlacement = 'primary' | 'overflow' | 'secondary';\n\n/**\n * Response from {@link CustomCallControlButtonCallback}.\n *\n * Includes the icon and placement prop necessary to indicate where to place the\n * {@link ControlBarButton} and a {@link DrawerMenuItem}\n *\n * @beta\n */\nexport interface CustomCallControlButtonProps extends CustomControlButtonProps {\n /**\n * Where to place the custom button relative to other buttons.\n */\n placement: CustomCallControlButtonPlacement;\n /**\n * Icon to render. Icon is a non-default icon name that needs to be registered as a\n * custom icon using registerIcons through fluentui. Examples include icons from the fluentui library\n */\n iconName?: string;\n}\n\n/** @private */\nexport const onFetchCustomButtonPropsTrampoline = (\n options?: CommonCallControlOptions\n): CustomCallControlButtonCallback[] | undefined => {\n let response: CustomCallControlButtonCallback[] | undefined = undefined;\n response = (options as _CommonCallControlOptions)?.onFetchCustomButtonProps;\n return response;\n};\n\"../../../../../react-components/src\""]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"ConvertContextualMenuItemToDrawerMenuItem.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ConvertContextualMenuItemToDrawerMenuItem.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAKlC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yCAAyC,GAAG,CACvD,cAAmC,EACnC,qBAAiC,EACX,EAAE;IACxB,OAAO;QACL,OAAO,EAAE,cAAc,CAAC,GAAG;QAC3B,WAAW,EAAE,GAAG,EAAE;;YAChB,MAAA,cAAc,CAAC,OAAO,+CAAtB,cAAc,CAAY,CAAC;YAC3B,qBAAqB,EAAE,CAAC;QAC1B,CAAC;QACD,SAAS,EAAE,cAAc,CAAC,SAAS;QACnC,IAAI,EAAE,cAAc,CAAC,IAAI;QACzB,QAAQ,EAAE,cAAc,CAAC,QAAQ;KAClC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\n\nimport { IContextualMenuItem } from '@fluentui/react';\nimport { _DrawerMenuItemProps } from '@internal/react-components';\n\n/**\n * Convert IContextualMenuItem to _DrawerMenuItemProps\n * @param contextualMenu - IContextualMenuItem to convert\n * @param onDrawerMenuItemClick - callback to call when converted DrawerMenuItem is clicked\n * @returns DrawerMenuItem\n * @private\n */\nexport const convertContextualMenuItemToDrawerMenuItem = (\n contextualMenu: IContextualMenuItem,\n onDrawerMenuItemClick: () => void\n): _DrawerMenuItemProps => {\n return {\n itemKey: contextualMenu.key,\n onItemClick: () => {\n contextualMenu.onClick?.();\n onDrawerMenuItemClick();\n },\n iconProps: contextualMenu.iconProps,\n text: contextualMenu.text,\n disabled: contextualMenu.disabled\n };\n};\n\"../../../../react-components/src\""]}
|
@@ -1,23 +1,14 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { ParticipantMenuItemsCallback } from "../../../../react-components/src";
|
3
|
-
import { CallWithChatCompositeStrings } from '../CallWithChatComposite';
|
4
3
|
import { AvatarPersonaDataCallback } from '../common/AvatarPersona';
|
5
|
-
import { CallCompositeStrings } from '../CallComposite';
|
6
|
-
import { PhoneNumberIdentifier } from '@azure/communication-common';
|
7
|
-
import { AddPhoneNumberOptions } from '@azure/communication-calling';
|
8
4
|
/**
|
9
5
|
* @private
|
10
6
|
*/
|
11
7
|
export declare const PeoplePaneContent: (props: {
|
12
|
-
active: boolean;
|
13
8
|
inviteLink?: string | undefined;
|
14
|
-
onRemoveParticipant: (participantId: string) => void;
|
15
|
-
onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions | undefined) => void;
|
16
9
|
onFetchAvatarPersonaData?: AvatarPersonaDataCallback | undefined;
|
17
10
|
onFetchParticipantMenuItems?: ParticipantMenuItemsCallback | undefined;
|
18
|
-
strings: CallWithChatCompositeStrings | /* @conditional-compile-remove(one-to-n-calling) */ CallCompositeStrings;
|
19
11
|
setDrawerMenuItems: (_DrawerMenuItemProps: any) => void;
|
20
12
|
mobileView?: boolean | undefined;
|
21
|
-
alternateCallerId?: string | undefined;
|
22
13
|
}) => JSX.Element;
|
23
14
|
//# sourceMappingURL=PeoplePaneContent.d.ts.map
|