communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
397 lines • 29.5 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 React, { useMemo, useRef, useEffect, useState, useCallback } from 'react';
import { CallAdapterProvider } from '../../CallComposite/adapter/CallAdapterProvider';
import { PeopleButton } from './PeopleButton';
import { concatStyleSets, mergeStyles, mergeStyleSets, PrimaryButton, Stack, useTheme } from '@fluentui/react';
import { controlBarContainerStyles } from '../../CallComposite/styles/CallControls.styles';
import { callControlsContainerStyles } from '../../CallComposite/styles/CallPage.styles';
import { useCallWithChatCompositeStrings } from '../../CallWithChatComposite/hooks/useCallWithChatCompositeStrings';
import { ControlBar } from "../../../../../react-components/src";
import { Microphone } from '../../CallComposite/components/buttons/Microphone';
import { Camera } from '../../CallComposite/components/buttons/Camera';
import { ScreenShare } from '../../CallComposite/components/buttons/ScreenShare';
import { EndCall } from '../../CallComposite/components/buttons/EndCall';
import { MoreButton } from '../MoreButton';
import { CUSTOM_BUTTON_OPTIONS, generateCustomCallControlBarButton, onFetchCustomButtonPropsTrampoline } from './CustomButton';
import { DesktopMoreButton } from './DesktopMoreButton';
import { isDisabled, _isSafari } from '../../CallComposite/utils';
import { CallingCaptionsSettingsModal } from '../CallingCaptionsSettingsModal';
import { RaiseHand } from '../../CallComposite/components/buttons/RaiseHand';
import { Reaction } from '../../CallComposite/components/buttons/Reaction';
import { useSelector } from '../../CallComposite/hooks/useSelector';
import { capabilitySelector } from '../../CallComposite/selectors/capabilitySelector';
import { DtmfDialpadButton } from './DtmfDialerButton';
import { ExitSpotlightButton } from '../ExitSpotlightButton';
import { useLocale } from '../../localization';
import { isBoolean } from '../utils';
import { getEnvironmentInfo } from '../../CallComposite/selectors/baseSelectors';
import { getIsTeamsCall } from '../../CallComposite/selectors/baseSelectors';
import { getAssignedBreakoutRoom, getBreakoutRoomSettings } from '../../CallComposite/selectors/baseSelectors';
import { callStatusSelector } from '../../CallComposite/selectors/callStatusSelector';
import { MeetingConferencePhoneInfoModal } from "../../../../../react-components/src";
import { Timer } from './Timer';
import { CallingRealTimeTextModal } from '../CallingRealTimeTextModal';
const inferCommonCallControlOptions = (mobileView, commonCallControlOptions) => {
if (commonCallControlOptions === false) {
return false;
}
const options = commonCallControlOptions === true || commonCallControlOptions === undefined ? {} : commonCallControlOptions;
if (mobileView) {
// Set to compressed mode when composite is optimized for mobile
options.displayType = 'compact';
// Set options to always not show screen share button for mobile
options.screenShareButton = false;
}
return options;
};
/**
* @private
*/
export const CommonCallControlBar = (props) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
const theme = useTheme();
const rtl = theme.rtl;
const controlBarContainerRef = useRef(null);
const sidepaneControlsRef = useRef(null);
const controlBarSizeRef = useRef(null);
const [controlBarButtonsWidth, setControlBarButtonsWidth] = useState(0);
const [panelsButtonsWidth, setPanelsButtonsWidth] = useState(0);
const [controlBarContainerWidth, setControlBarContainerWidth] = useState(0);
const [totalButtonsWidth, setTotalButtonsWidth] = useState(0);
const [isOutOfSpace, setIsOutOfSpace] = useState(false);
const callWithChatStrings = useCallWithChatCompositeStrings();
const options = inferCommonCallControlOptions(props.mobileView, props.callControls);
const [showCaptionsSettingsModal, setShowCaptionsSettingsModal] = useState(false);
const [showRealTimeTextModal, setShowRealTimeTextModal] = useState(false);
// If the hangup capability is not present, we default to true
const isHangUpForEveryoneAllowed = (_a = useSelector((state) => { var _a, _b; return (_b = (_a = state.call) === null || _a === void 0 ? void 0 : _a.capabilitiesFeature) === null || _b === void 0 ? void 0 : _b.capabilities.hangUpForEveryOne.isPresent; })) !== null && _a !== void 0 ? _a : true;
const isTeams = useSelector(getIsTeamsCall);
const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);
const breakoutRoomSettings = useSelector(getBreakoutRoomSettings);
const handleResize = useCallback(() => {
setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);
setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);
setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);
}, []);
// on load set inital width
useEffect(() => {
setControlBarButtonsWidth(controlBarContainerRef.current ? controlBarContainerRef.current.offsetWidth : 0);
setPanelsButtonsWidth(sidepaneControlsRef.current ? sidepaneControlsRef.current.offsetWidth : 0);
setControlBarContainerWidth(controlBarSizeRef.current ? controlBarSizeRef.current.offsetWidth : 0);
}, []);
// get the current width of control bar buttons and panel control buttons when browser size change
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [handleResize]);
/* when size change, reset total buttons width and compare with the control bar container width
if the total width of those buttons exceed container width, do not center the control bar buttons based on parent container width
Instead let them take up the remaining white space on the left */
useEffect(() => {
// white space on the left when control bar buttons are centered based on container width + control bar buttons width + panel control buttons width
setTotalButtonsWidth((controlBarContainerWidth - controlBarButtonsWidth) / 2 + controlBarButtonsWidth + panelsButtonsWidth);
}, [controlBarButtonsWidth, panelsButtonsWidth, controlBarContainerWidth]);
useEffect(() => {
setIsOutOfSpace(totalButtonsWidth > controlBarContainerWidth);
}, [totalButtonsWidth, controlBarContainerWidth]);
const openCaptionsSettingsModal = useCallback(() => {
setShowCaptionsSettingsModal(true);
}, []);
const openRealTimeTextModal = useCallback(() => {
setShowRealTimeTextModal(true);
}, []);
const onDismissRealTimeTextModal = useCallback(() => {
setShowRealTimeTextModal(false);
}, []);
const onDismissCaptionsSettings = useCallback(() => {
setShowCaptionsSettingsModal(false);
}, []);
const peopleButtonStrings = useMemo(() => ({
label: callWithChatStrings.peopleButtonLabel,
selectedLabel: callWithChatStrings.selectedPeopleButtonLabel,
tooltipOpenAriaLabel: callWithChatStrings.peopleButtonTooltipOpenAriaLabel,
tooltipCloseAriaLabel: callWithChatStrings.peopleButtonTooltipCloseAriaLabel,
tooltipOffContent: callWithChatStrings.peopleButtonTooltipOpen,
tooltipOnContent: callWithChatStrings.peopleButtonTooltipClose
}), [callWithChatStrings]);
const moreButtonStrings = useMemo(() => ({
label: callWithChatStrings.moreDrawerButtonLabel,
tooltipContent: callWithChatStrings.moreDrawerButtonTooltip
}), [callWithChatStrings]);
const callStrings = useLocale().strings.call;
const exitSpotlightButtonStrings = useMemo(() => ({
label: callStrings.exitSpotlightButtonLabel,
tooltipContent: callStrings.exitSpotlightButtonTooltip
}), [callStrings]);
const [isDeepNoiseSuppressionOn, setDeepNoiseSuppressionOn] = useState(false);
const startDeepNoiseSuppression = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
yield props.callAdapter.startNoiseSuppressionEffect();
}), [props.callAdapter]);
const environmentInfo = useSelector(getEnvironmentInfo);
const isSafari = _isSafari(environmentInfo);
useEffect(() => {
if (props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency &&
props.callAdapter.getState().deepNoiseSuppressionOnByDefault) {
startDeepNoiseSuppression();
setDeepNoiseSuppressionOn(true);
}
}, [props.callAdapter, startDeepNoiseSuppression]);
const showNoiseSuppressionButton = props.callAdapter.getState().onResolveDeepNoiseSuppressionDependency &&
!props.callAdapter.getState().hideDeepNoiseSuppressionButton &&
!isSafari
? true
: false;
const onClickNoiseSuppression = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
if (isDeepNoiseSuppressionOn) {
yield props.callAdapter.stopNoiseSuppressionEffect();
setDeepNoiseSuppressionOn(false);
}
else {
yield props.callAdapter.startNoiseSuppressionEffect();
setDeepNoiseSuppressionOn(true);
}
}), [props.callAdapter, isDeepNoiseSuppressionOn]);
const centerContainerStyles = useMemo(() => {
const styles = !props.mobileView ? desktopControlBarStyles : {};
return mergeStyleSets(styles, {
root: {
// Enforce a background color on control bar to ensure it matches the composite background color.
background: theme.semanticColors.bodyBackground
}
});
}, [props.mobileView, theme.semanticColors.bodyBackground]);
const screenShareButtonStyles = useMemo(() => (!props.mobileView ? getDesktopScreenShareButtonStyles(theme) : undefined), [props.mobileView, theme]);
const commonButtonStyles = useMemo(() => (!props.mobileView ? getDesktopCommonButtonStyles(theme) : undefined), [props.mobileView, theme]);
const endCallButtonStyles = useMemo(() => (!props.mobileView ? getDesktopEndCallButtonStyles(theme) : undefined), [props.mobileView, theme]);
const controlBarWrapperDesktopStyles = useMemo(
// only center control bar buttons based on parent container if there are enough space on the screen and not mobile
() => (!props.mobileView && !isOutOfSpace ? (rtl ? wrapperDesktopRtlStyles : wrapperDesktopStyles) : {}), [props.mobileView, rtl, isOutOfSpace]);
// only center control bar buttons based on parent container if there are enough space on the screen and not mobile
const controlBarDesktopContainerStyles = useMemo(() => !props.mobileView && !isOutOfSpace
? {
position: 'relative',
minHeight: '4.5rem',
width: '100%',
display: 'flex',
alignItems: 'center',
paddingLeft: '1rem'
}
: {}, [props.mobileView, isOutOfSpace]);
const customButtons = useMemo(() => generateCustomCallControlBarButton(onFetchCustomButtonPropsTrampoline(options !== false ? options : undefined), options !== false ? options === null || options === void 0 ? void 0 : options.displayType : undefined), [options]);
const capabilitiesSelector = useSelector(capabilitySelector);
const callState = useSelector(callStatusSelector);
const isReactionAllowed = callState.callStatus !== 'Connected' ||
!(capabilitiesSelector === null || capabilitiesSelector === void 0 ? void 0 : capabilitiesSelector.capabilities) ||
capabilitiesSelector.capabilities.useReactions.isPresent;
const canReturnToMainMeeting = breakoutRoomSettings && breakoutRoomSettings.disableReturnToMainMeeting === false;
const returnFromBreakoutRoom = useCallback(() => props.callAdapter.returnFromBreakoutRoom(), [props.callAdapter]);
// when options is false then we want to hide the whole control bar.
if (options === false) {
return React.createElement(React.Fragment, null);
}
const sideButtonsPresent = isEnabled(options.peopleButton) || isEnabled(options.chatButton) || customButtons['secondary'] !== undefined;
const screenShareButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.screenShareButton);
const microphoneButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.microphoneButton);
const cameraButtonIsEnabled = isEnabled(options === null || options === void 0 ? void 0 : options.cameraButton);
const showExitSpotlightButton = (options === null || options === void 0 ? void 0 : options.exitSpotlightButton) !== false;
const showCaptionsButton = props.isCaptionsSupported && isEnabled(options.captionsButton);
const showRealTimeTextButton = props.isRealTimeTextSupported && isEnabled(options.realTimeTextButton);
const showTeamsMeetingPhoneCallButton = isEnabled(options === null || options === void 0 ? void 0 : options.teamsMeetingPhoneCallButton);
const showDesktopMoreButton = isEnabled(options === null || options === void 0 ? void 0 : options.moreButton) &&
(isEnabled(options === null || options === void 0 ? void 0 : options.holdButton) || showCaptionsButton || props.onUserSetGalleryLayout || showRealTimeTextButton);
const role = (_b = props.callAdapter.getState().call) === null || _b === void 0 ? void 0 : _b.role;
const hideRaiseHandButtonInRoomsCall = props.callAdapter.getState().isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
const reactionResources = props.callAdapter.getState().reactions;
return (React.createElement("div", { ref: controlBarSizeRef },
React.createElement(CallAdapterProvider, { adapter: props.callAdapter },
showCaptionsSettingsModal && (React.createElement(CallingCaptionsSettingsModal, { showCaptionsSettingsModal: showCaptionsSettingsModal, onDismissCaptionsSettings: onDismissCaptionsSettings, changeCaptionLanguage: props.isCaptionsOn && props.useTeamsCaptions })),
showRealTimeTextModal && (React.createElement(CallingRealTimeTextModal, { showModal: showRealTimeTextModal, onDismissModal: onDismissRealTimeTextModal, onStartRealTimeText: props.onStartRealTimeText })),
props.teamsMeetingConferenceModalPresent && (React.createElement(MeetingConferencePhoneInfoModal, { conferencePhoneInfoList: (_e = (_d = (_c = props.callAdapter.getState().call) === null || _c === void 0 ? void 0 : _c.meetingConference) === null || _d === void 0 ? void 0 : _d.conferencePhones) !== null && _e !== void 0 ? _e : [], showModal: props.teamsMeetingConferenceModalPresent, onDismissMeetingPhoneInfoSettings: props.onToggleTeamsMeetingConferenceModal }))),
React.createElement(Stack, { horizontal: true, reversed: !props.mobileView && !isOutOfSpace, horizontalAlign: "space-between", className: mergeStyles(callControlsContainerStyles, controlBarContainerStyles, controlBarDesktopContainerStyles) },
React.createElement(Stack.Item, { grow: true, className: mergeStyles(controlBarWrapperDesktopStyles) },
React.createElement(CallAdapterProvider, { adapter: props.callAdapter },
React.createElement(Stack, { horizontalAlign: "center" },
React.createElement(Stack.Item, null,
React.createElement("div", { ref: controlBarContainerRef },
React.createElement(ControlBar, { layout: props.displayVertical ? 'vertical' : 'horizontal', styles: centerContainerStyles },
!props.mobileView &&
assignedBreakoutRoom &&
assignedBreakoutRoom.state === 'open' &&
// Breakout room settings are only defined in a breakout room so we use this to ensure
// the button is not shown when already in a breakout room
!breakoutRoomSettings && (React.createElement(PrimaryButton, { text: callStrings.joinBreakoutRoomButtonLabel, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
assignedBreakoutRoom.join();
}), styles: commonButtonStyles })),
microphoneButtonIsEnabled && (React.createElement(Microphone, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, disabled: props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton), disableTooltip: props.mobileView, onClickNoiseSuppression: onClickNoiseSuppression, isDeepNoiseSuppressionOn: isDeepNoiseSuppressionOn, showNoiseSuppressionButton: showNoiseSuppressionButton })),
cameraButtonIsEnabled && (React.createElement(Camera, { displayType: options.displayType, styles: commonButtonStyles, splitButtonsForDeviceSelection: !props.mobileView, disabled: props.disableButtonsForHoldScreen || isDisabled(options.cameraButton), onClickVideoEffects: props.onClickVideoEffects, componentRef: props.cameraButtonRef, disableTooltip: props.mobileView })),
!props.mobileView &&
isReactionAllowed &&
isEnabled(options.reactionButton) &&
reactionResources && (React.createElement(Reaction, { displayType: options.displayType, styles: commonButtonStyles, disabled: props.disableButtonsForHoldScreen, reactionResource: reactionResources })),
!props.mobileView && isEnabled(options.raiseHandButton) && !hideRaiseHandButtonInRoomsCall && (React.createElement(RaiseHand, { displayType: options.displayType, styles: commonButtonStyles, disabled: props.disableButtonsForHoldScreen || isDisabled(options.microphoneButton) })),
showDtmfDialerButton(options) && props.onSetDialpadPage !== undefined && (React.createElement(DtmfDialpadButton, { styles: commonButtonStyles, displayType: options.displayType, onClick: () => {
if (props.onSetDialpadPage !== undefined) {
props.onSetDialpadPage();
}
} })),
showExitSpotlightButton && props.onStopLocalSpotlight && (React.createElement(ExitSpotlightButton, { displayType: options.displayType, onClick: props.onStopLocalSpotlight, styles: commonButtonStyles, strings: exitSpotlightButtonStrings })),
screenShareButtonIsEnabled && (React.createElement(ScreenShare, { option: options.screenShareButton, displayType: options.displayType, styles: screenShareButtonStyles, disabled: props.disableButtonsForHoldScreen || isDisabled(options.screenShareButton) })), (_f = customButtons['primary']) === null || _f === void 0 ? void 0 :
_f.slice(0, props.mobileView
? CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_MOBILE_CUSTOM_BUTTONS
: CUSTOM_BUTTON_OPTIONS.MAX_PRIMARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
return (React.createElement(CustomButton, { key: `primary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact', disableTooltip: props.mobileView }));
}),
props.mobileView && (React.createElement(MoreButton, { "data-ui-id": "common-call-composite-more-button", strings: moreButtonStrings, onClick: props.onMoreButtonClicked, disabled: props.disableButtonsForLobbyPage, disableTooltip: props.mobileView })),
!props.mobileView && showDesktopMoreButton && (React.createElement(DesktopMoreButton, { disableButtonsForHoldScreen: props.disableButtonsForHoldScreen, styles: commonButtonStyles, onClickShowDialpad: props.onClickShowDialpad, callControls: props.callControls, isCaptionsSupported: showCaptionsButton, isRealTimeTextSupported: showRealTimeTextButton, onCaptionsSettingsClick: openCaptionsSettingsModal, onStartRealTimeTextClick: openRealTimeTextModal, startRealTimeTextButtonChecked: props.startRealTimeTextButtonChecked, onUserSetOverflowGalleryPositionChange: props.onUserSetOverflowGalleryPositionChange, onUserSetGalleryLayout: props.onUserSetGalleryLayout, userSetGalleryLayout: props.userSetGalleryLayout, dtmfDialerPresent: props.dtmfDialerPresent, onSetDialpadPage: props.onSetDialpadPage, teamsMeetingPhoneCallEnable: showTeamsMeetingPhoneCallButton, onMeetingPhoneInfoClick: props.onToggleTeamsMeetingConferenceModal })),
React.createElement(EndCall, { displayType: "compact", mobileView: props.mobileView, styles: endCallButtonStyles, enableEndCallMenu: !isBoolean(props.callControls) &&
!isBoolean((_g = props.callControls) === null || _g === void 0 ? void 0 : _g.endCallButton) &&
!props.mobileView &&
isHangUpForEveryoneAllowed &&
!isTeams && // Temporary disable it for Teams call, since capability does not give the right value
((_j = (_h = props.callControls) === null || _h === void 0 ? void 0 : _h.endCallButton) === null || _j === void 0 ? void 0 : _j.hangUpForEveryone) === 'endCallOptions' &&
// Only show the end call menu when the call is connected, user should not be able to end the call for everyone
// when they are not actively in the call to communicate they will.
callState.callStatus === 'Connected' &&
!canReturnToMainMeeting, disableEndCallModal: !isBoolean(props.callControls) &&
!isBoolean((_k = props.callControls) === null || _k === void 0 ? void 0 : _k.endCallButton) &&
((_m = (_l = props.callControls) === null || _l === void 0 ? void 0 : _l.endCallButton) === null || _m === void 0 ? void 0 : _m.disableEndCallModal), returnFromBreakoutRoom: canReturnToMainMeeting ? returnFromBreakoutRoom : undefined }))))))),
!props.mobileView && sideButtonsPresent && (React.createElement(Stack.Item, null,
React.createElement("div", { ref: sidepaneControlsRef },
React.createElement(Stack, { horizontal: true, className: !props.mobileView ? mergeStyles(desktopButtonContainerStyle) : undefined },
isEnabled(options === null || options === void 0 ? void 0 : options.peopleButton) && (React.createElement(PeopleButton, { checked: props.peopleButtonChecked, ariaLabel: peopleButtonStrings.label, showLabel: options.displayType !== 'compact', onClick: props.onPeopleButtonClicked, "data-ui-id": "common-call-composite-people-button", disabled: props.disableButtonsForLobbyPage ||
props.disableButtonsForHoldScreen ||
isDisabled(options.peopleButton), strings: peopleButtonStrings, styles: commonButtonStyles, componentRef: props.peopleButtonRef, chatButtonPresent: isEnabled(options.chatButton), peoplePaneDismissButtonRef: props.sidePaneDismissButtonRef })), (_o = customButtons['secondary']) === null || _o === void 0 ? void 0 :
_o.slice(0, CUSTOM_BUTTON_OPTIONS.MAX_SECONDARY_DESKTOP_CUSTOM_BUTTONS).map((CustomButton, i) => {
return (React.createElement(CustomButton, { key: `secondary-custom-button-${i}`, styles: commonButtonStyles, showLabel: options.displayType !== 'compact' }));
}))))),
(breakoutRoomSettings === null || breakoutRoomSettings === void 0 ? void 0 : breakoutRoomSettings.roomEndTime) && !props.mobileView && !isOutOfSpace && (React.createElement(Stack.Item, null,
React.createElement(Timer, { timeStampInfo: breakoutRoomSettings === null || breakoutRoomSettings === void 0 ? void 0 : breakoutRoomSettings.roomEndTime.toString() }))))));
};
const desktopButtonContainerStyle = {
padding: '0.75rem',
columnGap: '0.5rem'
};
const desktopControlBarStyles = {
root: desktopButtonContainerStyle
};
{
/*
Styling here to ensure the control bar buttons stay in the center of the parent component (control Container) regardless of its siblings
Need to add 'reversed' to parent container because the styling here reverse the position of the two stack items
*/
}
const wrapperDesktopStyles = {
position: 'absolute',
left: '50%',
transform: 'translate(-50%, 0)'
};
const wrapperDesktopRtlStyles = {
position: 'absolute',
right: '50%',
transform: 'translate(-50%, 0)'
};
/** @private */
export const getDesktopCommonButtonStyles = (theme) => ({
root: {
border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,
borderRadius: theme.effects.roundedCorner4,
minHeight: '2.5rem',
maxWidth: '12rem' // allot extra space than the regular ControlBarButton. This is to give extra room to have the icon beside the text.
},
flexContainer: {
display: 'flex',
flexFlow: 'row nowrap'
},
textContainer: {
// Override the default so that label doesn't introduce a new block.
display: 'inline',
// Ensure width is set to permit child to show ellipsis when there is a label that is too long
maxWidth: '100%'
},
label: {
fontSize: theme.fonts.medium.fontSize,
// Ensure there is enough space between the icon and text to allow for the unread messages badge in the chat button
marginLeft: '0.625rem',
// Ensure letters that go above and below the standard text line like 'g', 'y', 'j' are not clipped
lineHeight: '1.5rem',
// Do not allow very long button texts to ruin the control bar experience, instead ensure long text is truncated and shows ellipsis
display: 'block',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden'
},
splitButtonMenuButton: {
border: `solid 1px ${theme.palette.neutralQuaternaryAlt}`,
borderTopRightRadius: theme.effects.roundedCorner4,
borderBottomRightRadius: theme.effects.roundedCorner4,
borderTopLeftRadius: '0',
borderBottomLeftRadius: '0'
},
splitButtonMenuButtonChecked: {
// Default colors the menu half similarly for :hover and when button is checked.
// To align with how the left-half is styled, override the checked style.
background: 'none'
}
});
const getDesktopScreenShareButtonStyles = (theme) => {
const overrideStyles = {
border: 'none',
background: theme.palette.themePrimary,
color: theme.palette.white,
'* > svg': { fill: theme.palette.white },
'@media (forced-colors: active)': {
border: '1px solid',
borderColor: theme.palette.black
}
};
const overrides = {
rootChecked: overrideStyles,
rootCheckedHovered: overrideStyles
};
return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);
};
const getDesktopEndCallButtonStyles = (theme) => {
const overrides = {
root: {
// Suppress border around the dark-red button.
border: 'none'
},
rootFocused: {
'@media (forced-colors: active)': {
background: 'highlight',
color: 'highlightText',
borderColor: theme.palette.black,
borderRadius: 'unset',
outline: `3px solid ${theme.palette.black}`
}
},
icon: {
'@media (forced-colors: active)': {
':focused': {
color: theme.palette.white
}
}
}
};
return concatStyleSets(getDesktopCommonButtonStyles(theme), overrides);
};
const isEnabled = (option) => option !== false;
const showDtmfDialerButton = (options) => {
if (options.moreButton === false && options.dtmfDialerButton !== false) {
return true;
}
else {
return false;
}
};
//# sourceMappingURL=CommonCallControlBar.js.map