@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
329 lines • 15 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { HoldButton } from "../../../../../react-components/src";
import { StartCaptionsButton } from "../../../../../react-components/src";
import React from 'react';
import { useState } from 'react';
import { useMemo, useCallback } from 'react';
import { usePropsFor } from '../../CallComposite/hooks/usePropsFor';
import { buttonFlyoutIncreasedSizeStyles } from '../../CallComposite/styles/Buttons.styles';
import { MoreButton } from '../MoreButton';
import { useLocale } from '../../localization';
import { CUSTOM_BUTTON_OPTIONS, generateCustomCallDesktopOverflowButtons, onFetchCustomButtonPropsTrampoline } from './CustomButton';
import { _preventDismissOnEvent } from "../../../../../acs-ui-common/src";
import { showDtmfDialer } from '../../CallComposite/utils/MediaGalleryUtils';
import { useSelector } from '../../CallComposite/hooks/useSelector';
import { getTargetCallees } from '../../CallComposite/selectors/baseSelectors';
import { getTeamsMeetingCoordinates, getIsTeamsMeeting } from '../../CallComposite/selectors/baseSelectors';
/**
*
* @private
*/
export const DesktopMoreButton = (props) => {
var _a, _b, _c, _d, _e;
const localeStrings = useLocale();
const holdButtonProps = usePropsFor(HoldButton);
const startCaptionsButtonProps = usePropsFor(StartCaptionsButton);
const startCaptions = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
yield startCaptionsButtonProps.onStartCaptions({
spokenLanguage: startCaptionsButtonProps.currentSpokenLanguage
});
}), [startCaptionsButtonProps]);
const [focusedContentOn, setFocusedContentOn] = useState(false);
const [previousLayout, setPreviousLayout] = useState((_a = props.userSetGalleryLayout) !== null && _a !== void 0 ? _a : 'floatingLocalVideo');
const callees = useSelector(getTargetCallees);
const allowDtmfDialer = showDtmfDialer(callees);
const isTeamsMeeting = useSelector(getIsTeamsMeeting);
const teamsMeetingCoordinates = useSelector(getTeamsMeetingCoordinates);
const [dtmfDialerChecked, setDtmfDialerChecked] = useState((_b = props.dtmfDialerPresent) !== null && _b !== void 0 ? _b : false);
const moreButtonStrings = useMemo(() => ({
label: localeStrings.strings.call.moreButtonCallingLabel,
tooltipOffContent: localeStrings.strings.callWithChat.moreDrawerButtonTooltip
}), [localeStrings]);
const moreButtonContextualMenuItems = [];
const menuSubIconStyleSet = {
root: {
height: 'unset',
lineHeight: '100%',
width: '1.25rem'
}
};
if (props.callControls === true || ((_c = props.callControls) === null || _c === void 0 ? void 0 : _c.holdButton) !== false) {
moreButtonContextualMenuItems.push({
key: 'holdButtonKey',
text: localeStrings.component.strings.holdButton.tooltipOffContent,
onClick: () => {
holdButtonProps.onToggleHold();
},
iconProps: {
iconName: 'HoldCallContextualMenuItem',
styles: {
root: {
lineHeight: 0
}
}
},
itemProps: {
styles: buttonFlyoutIncreasedSizeStyles
},
disabled: props.disableButtonsForHoldScreen
});
}
// is captions feature is active
if (props.isCaptionsSupported) {
const captionsContextualMenuItems = [];
moreButtonContextualMenuItems.push({
key: 'liveCaptionsKey',
id: 'common-call-composite-captions-button',
text: localeStrings.strings.call.liveCaptionsLabel,
iconProps: {
iconName: 'CaptionsIcon',
styles: {
root: {
lineHeight: 0
}
}
},
itemProps: {
styles: buttonFlyoutIncreasedSizeStyles
},
disabled: props.disableButtonsForHoldScreen,
subMenuProps: {
id: 'captions-contextual-menu',
items: captionsContextualMenuItems,
calloutProps: {
preventDismissOnEvent: _preventDismissOnEvent
}
},
submenuIconProps: {
iconName: 'HorizontalGalleryRightButton',
styles: menuSubIconStyleSet
}
});
captionsContextualMenuItems.push({
key: 'ToggleCaptionsKey',
id: 'common-call-composite-captions-toggle-button',
text: startCaptionsButtonProps.checked ? localeStrings.strings.call.startCaptionsButtonTooltipOnContent : localeStrings.strings.call.startCaptionsButtonTooltipOffContent,
onClick: () => {
startCaptionsButtonProps.checked ? startCaptionsButtonProps.onStopCaptions() : startCaptionsButtonProps.currentSpokenLanguage !== '' ? startCaptions() : props.onCaptionsSettingsClick && props.onCaptionsSettingsClick();
},
iconProps: {
iconName: startCaptionsButtonProps.checked ? 'CaptionsOffIcon' : 'CaptionsIcon',
styles: {
root: {
lineHeight: 0
}
}
},
itemProps: {
styles: buttonFlyoutIncreasedSizeStyles
},
disabled: props.disableButtonsForHoldScreen
});
if (props.onCaptionsSettingsClick) {
captionsContextualMenuItems.push({
key: 'openCaptionsSettingsKey',
id: 'common-call-composite-captions-settings-button',
text: localeStrings.strings.call.captionsSettingsLabel,
onClick: props.onCaptionsSettingsClick,
iconProps: {
iconName: 'CaptionsSettingsIcon',
styles: {
root: {
lineHeight: 0
}
}
},
itemProps: {
styles: buttonFlyoutIncreasedSizeStyles
},
disabled: props.disableButtonsForHoldScreen || !startCaptionsButtonProps.checked
});
}
}
//RTT
const dtmfDialerScreenOption = {
key: 'dtmfDialerScreenKey',
itemProps: {
styles: buttonFlyoutIncreasedSizeStyles
},
text: !dtmfDialerChecked ? localeStrings.strings.call.dtmfDialerMoreButtonLabelOn : localeStrings.strings.call.dtmfDialerMoreButtonLabelOff,
onClick: () => {
props.onSetDialpadPage && props.onSetDialpadPage();
setDtmfDialerChecked(!dtmfDialerChecked);
},
iconProps: {
iconName: 'DtmfDialpadButton',
styles: {
root: {
lineHeight: 0
}
}
}
};
/**
* Only render the dtmf dialer if the dialpad for PSTN calls is not present
*/
if (props.onSetDialpadPage && allowDtmfDialer) {
if (props.callControls === true || ((_d = props.callControls) === null || _d === void 0 ? void 0 : _d.dtmfDialerButton) !== false) {
moreButtonContextualMenuItems.push(dtmfDialerScreenOption);
}
}
const joinByPhoneOption = {
key: 'phoneCallKey',
itemProps: {
styles: buttonFlyoutIncreasedSizeStyles
},
text: localeStrings.strings.call.phoneCallMoreButtonLabel,
onClick: () => {
props.onMeetingPhoneInfoClick && props.onMeetingPhoneInfoClick();
},
iconProps: {
iconName: 'PhoneNumberButton',
styles: {
root: {
lineHeight: 0
}
}
}
};
/**
* Only render the phone call button if meeting conordinates are present
*/
if (props.teamsMeetingPhoneCallEnable && isTeamsMeeting && teamsMeetingCoordinates) {
moreButtonContextualMenuItems.push(joinByPhoneOption);
}
if (props.onUserSetOverflowGalleryPositionChange) {
const galleryOptions = {
key: 'overflowGalleryPositionKey',
iconProps: {
iconName: 'GalleryOptions',
styles: {
root: {
lineHeight: 0
}
}
},
itemProps: {
styles: buttonFlyoutIncreasedSizeStyles
},
submenuIconProps: {
styles: menuSubIconStyleSet
},
text: localeStrings.strings.call.moreButtonGalleryControlLabel,
disabled: props.disableButtonsForHoldScreen,
subMenuProps: {
items: [{
key: 'dynamicSelectionKey',
text: localeStrings.strings.call.moreButtonGalleryFloatingLocalLayoutLabel,
canCheck: true,
itemProps: {
styles: buttonFlyoutIncreasedSizeStyles
},
isChecked: props.userSetGalleryLayout === 'floatingLocalVideo',
onClick: () => {
props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('floatingLocalVideo');
setFocusedContentOn(false);
},
iconProps: {
iconName: 'FloatingLocalVideoGalleryLayout',
styles: {
root: {
lineHeight: 0
}
}
}
}, {
key: 'speakerSelectionKey',
text: localeStrings.strings.call.moreButtonGallerySpeakerLayoutLabel,
canCheck: true,
itemProps: {
styles: buttonFlyoutIncreasedSizeStyles
},
isChecked: props.userSetGalleryLayout === 'speaker',
onClick: () => {
props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('speaker');
setFocusedContentOn(false);
},
iconProps: {
iconName: 'SpeakerGalleryLayout',
styles: {
root: {
lineHeight: 0
}
}
}
}, {
key: 'focusedContentSelectionKey',
text: localeStrings.strings.call.moreButtonGalleryFocusedContentLayoutLabel,
canCheck: true,
itemProps: {
styles: buttonFlyoutIncreasedSizeStyles
},
isChecked: focusedContentOn,
onClick: () => {
var _a;
if (focusedContentOn === false) {
setPreviousLayout((_a = props.userSetGalleryLayout) !== null && _a !== void 0 ? _a : 'floatingLocalVideo');
props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('focusedContent');
setFocusedContentOn(true);
}
else {
props.onUserSetGalleryLayout && props.onUserSetGalleryLayout(previousLayout);
setFocusedContentOn(false);
}
},
iconProps: {
iconName: 'FocusedContentGalleryLayout',
styles: {
root: {
lineHeight: 0
}
}
}
}],
calloutProps: {
preventDismissOnEvent: _preventDismissOnEvent
}
}
};
if (props.callControls === true || ((_e = props.callControls) === null || _e === void 0 ? void 0 : _e.galleryControlsButton) !== false) {
moreButtonContextualMenuItems.push(galleryOptions);
}
}
const customDrawerButtons = useMemo(() => generateCustomCallDesktopOverflowButtons(onFetchCustomButtonPropsTrampoline(typeof props.callControls === 'object' ? props.callControls : undefined), typeof props.callControls === 'object' ? props.callControls.displayType : undefined), [props.callControls]);
customDrawerButtons['primary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).forEach(element => {
moreButtonContextualMenuItems.push(Object.assign({ itemProps: {
styles: buttonFlyoutIncreasedSizeStyles
} }, element));
});
customDrawerButtons['secondary'].slice(CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).forEach(element => {
moreButtonContextualMenuItems.push(Object.assign({ itemProps: {
styles: buttonFlyoutIncreasedSizeStyles
} }, element));
});
customDrawerButtons['overflow'].forEach(element => {
moreButtonContextualMenuItems.push(Object.assign({ itemProps: {
styles: buttonFlyoutIncreasedSizeStyles
} }, element));
});
return React.createElement(MoreButton, Object.assign({}, props, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, menuIconProps: {
hidden: true
}, menuProps: {
shouldFocusOnContainer: false,
items: moreButtonContextualMenuItems,
calloutProps: {
preventDismissOnEvent: _preventDismissOnEvent
}
} }));
};
//# sourceMappingURL=DesktopMoreButton.js.map