in packages/react-composites/src/composites/CallComposite/components/CallControls.tsx [229:304]
disabled: isDisabled(options?.holdButton),
['data-ui-id']: 'hold-button'
});
}
return items;
};
const customDrawerButtons = useMemo(
() =>
generateCustomCallDesktopOverflowButtons(
onFetchCustomButtonPropsTrampoline(typeof options === 'object' ? options : undefined),
typeof options === 'object' ? options.displayType : undefined
),
[options]
);
const moreButtonMenuItems = moreButtonContextualMenuItems();
let showMoreButton = isEnabled(options?.moreButton) && moreButtonMenuItems.length > 0;
if (showMoreButton) {
numberOfButtons++;
}
const customButtons = useMemo(
() => generateCustomCallControlBarButton(onFetchCustomButtonPropsTrampoline(options), options?.displayType),
[options]
);
numberOfButtons += React.Children.count(customButtons['primary']) + React.Children.count(customButtons['secondary']);
let showDevicesButtonInControlBar = isEnabled(options?.devicesButton);
if (showDevicesButtonInControlBar && (props.isMobile ? numberOfButtons < 5 : true)) {
numberOfButtons++;
} else {
showDevicesButtonInControlBar = false;
showMoreButton = isEnabled(options?.moreButton);
}
const reactionResources = useSelector(getReactionResources);
const raiseHandButtonIsEnabled = isEnabled(options?.raiseHandButton);
let showRaiseHandButtonInControlBar = raiseHandButtonIsEnabled;
const role = useSelector(getRole);
const hideRaiseHandButtonInRoomsCall = isRoomsCall && role && ['Consumer', 'Unknown'].includes(role);
if (showRaiseHandButtonInControlBar && (props.isMobile ? numberOfButtons < 5 : true)) {
numberOfButtons++;
} else {
// If more button is not present but enabled then replace previous button (devices button) with more button
if (!showMoreButton && isEnabled(options?.moreButton)) {
showMoreButton = true;
showDevicesButtonInControlBar = false;
}
showRaiseHandButtonInControlBar = false;
}
if (!showDevicesButtonInControlBar) {
const devicesButtonMenu = _generateDefaultDeviceMenuProps(
devicesButtonProps,
localeStrings.component.strings.devicesButton
);
moreButtonMenuItems.push({
key: 'devicesButtonKey',
text: localeStrings.component.strings.devicesButton.label,
iconProps: { iconName: 'ControlButtonOptions', styles: { root: { lineHeight: 0 } } },
subMenuProps: devicesButtonMenu,
['data-ui-id']: 'call-composite-more-menu-devices-button'
});
}
if (!showRaiseHandButtonInControlBar && !hideRaiseHandButtonInRoomsCall) {
moreButtonMenuItems.push({
key: 'raiseHandButtonKey',
text: raiseHandButtonProps.checked
? localeStrings.component.strings.raiseHandButton.onLabel
: localeStrings.component.strings.raiseHandButton.offLabel,
onClick: () => {