communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
121 lines • 8.84 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 { Stack } from '@fluentui/react';
import { ParticipantList } from "../../../../react-components/src";
import React, { useCallback, useMemo } from 'react';
import { usePropsFor } from '../CallComposite/hooks/usePropsFor';
import { ParticipantListWithHeading } from '../common/ParticipantContainer';
import { peoplePaneContainerTokens } from '../common/styles/ParticipantContainer.styles';
import { participantListContainerStyles, peoplePaneContainerStyle } from './styles/PeoplePaneContent.styles';
import { convertContextualMenuItemToDrawerMenuItem } from './ConvertContextualMenuItemToDrawerMenuItem';
import { AddPeopleButton } from './AddPeopleButton';
import { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';
import { useLocale } from '../localization';
/**
* @private
*/
export const PeoplePaneContent = (props) => {
const { inviteLink, onFetchParticipantMenuItems, setDrawerMenuItems, setParticipantActioned, participantListHeadingMoreButtonProps } = props;
const adapter = useAdapter();
const localeStrings = useLocale();
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
const getStrings = () => {
return localeStrings.strings.call;
};
const strings = getStrings();
const removeParticipantFromCall = useCallback((participantId) => __awaiter(void 0, void 0, void 0, function* () {
yield adapter.removeParticipant(participantId);
}), [adapter]);
const addParticipantToCall = useCallback((participant, options) => __awaiter(void 0, void 0, void 0, function* () {
yield adapter.addParticipant(participant, options);
}), [adapter]);
const participantListDefaultProps = usePropsFor(ParticipantList);
const removeButtonAllowed = canRemoveParticipants(props.role);
const setDrawerMenuItemsForParticipant = useMemo(() => {
return (participant) => {
if (participant) {
setParticipantActioned === null || setParticipantActioned === void 0 ? void 0 : setParticipantActioned(participant.userId);
let contextualMenuItems = createDefaultContextualMenuItems(participant, strings, removeButtonAllowed && participant.isRemovable ? participantListDefaultProps.onRemoveParticipant : undefined, participantListDefaultProps.myUserId);
if (onFetchParticipantMenuItems) {
contextualMenuItems = onFetchParticipantMenuItems(participant.userId, participantListDefaultProps.myUserId, contextualMenuItems);
}
const drawerMenuItems = contextualMenuItems.map((contextualMenu) => convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setDrawerMenuItems([])));
setDrawerMenuItems(drawerMenuItems);
}
};
}, [
strings,
participantListDefaultProps.onRemoveParticipant,
participantListDefaultProps.myUserId,
removeButtonAllowed,
onFetchParticipantMenuItems,
setDrawerMenuItems,
setParticipantActioned
]);
const setDrawerMenuItemsForParticipantListHeadingMoreButton = useMemo(() => {
const drawerMenuItems = participantListHeadingMoreButtonProps === null || participantListHeadingMoreButtonProps === void 0 ? void 0 : participantListHeadingMoreButtonProps.items.map((contextualMenu) => convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setDrawerMenuItems([])));
return drawerMenuItems && drawerMenuItems.length > 0 ? () => setDrawerMenuItems(drawerMenuItems) : undefined;
}, [participantListHeadingMoreButtonProps === null || participantListHeadingMoreButtonProps === void 0 ? void 0 : participantListHeadingMoreButtonProps.items, setDrawerMenuItems]);
const participantListProps = useMemo(() => {
const onRemoveAParticipant = (participantId) => __awaiter(void 0, void 0, void 0, function* () { return removeParticipantFromCall(participantId); });
return Object.assign(Object.assign({}, participantListDefaultProps), {
// Passing undefined callback for mobile to avoid context menus for participants in ParticipantList are clicked
onRemoveParticipant: props.mobileView ? undefined : onRemoveAParticipant,
// We want the drawer menu items to appear when participants in ParticipantList are clicked
onParticipantClick: props.mobileView ? setDrawerMenuItemsForParticipant : undefined });
}, [participantListDefaultProps, props.mobileView, setDrawerMenuItemsForParticipant, removeParticipantFromCall]);
const participantList = (React.createElement(ParticipantListWithHeading, { isMobile: props.mobileView, participantListProps: participantListProps, onFetchAvatarPersonaData: props.onFetchAvatarPersonaData, onFetchParticipantMenuItems: props.mobileView ? undefined : onFetchParticipantMenuItems, title: strings.peoplePaneSubTitle, headingMoreButtonAriaLabel: localeStrings.strings.call.peoplePaneMoreButtonAriaLabel, onClickHeadingMoreButton: props.mobileView ? setDrawerMenuItemsForParticipantListHeadingMoreButton : undefined, headingMoreButtonMenuProps: props.participantListHeadingMoreButtonProps, pinnedParticipants: props.pinnedParticipants }));
if (props.mobileView) {
return (React.createElement(Stack, { verticalFill: true, styles: peoplePaneContainerStyle, tokens: peoplePaneContainerTokens, "data-ui-id": "people-pane-content" },
React.createElement(Stack.Item, { grow: true, styles: participantListContainerStyles }, participantList),
React.createElement(AddPeopleButton, { inviteLink: inviteLink, mobileView: props.mobileView, participantList: participantList, strings: strings, onAddParticipant: addParticipantToCall, alternateCallerId: props.alternateCallerId })));
}
return (React.createElement(AddPeopleButton, { inviteLink: inviteLink, mobileView: props.mobileView, participantList: participantList, strings: strings, onAddParticipant: addParticipantToCall, alternateCallerId: props.alternateCallerId }));
};
/**
* Create default contextual menu items for particant
* @param participant - participant to create contextual menu items for
* @param strings - localized strings for menu item text
* @param onRemoveParticipant - callback to remove participant
* @param localParticipantUserId - Local participant user id
* @returns - IContextualMenuItem[]
*/
const createDefaultContextualMenuItems = (participant, strings, onRemoveParticipant, localParticipantUserId) => {
const menuItems = [];
if (onRemoveParticipant && (participant === null || participant === void 0 ? void 0 : participant.userId) !== localParticipantUserId) {
menuItems.push({
key: 'remove',
text: strings.removeMenuLabel,
role: 'menuitem',
onClick: () => {
if (participant === null || participant === void 0 ? void 0 : participant.userId) {
onRemoveParticipant === null || onRemoveParticipant === void 0 ? void 0 : onRemoveParticipant(participant === null || participant === void 0 ? void 0 : participant.userId);
}
},
iconProps: {
iconName: 'ContextMenuRemoveParticipant',
styles: { root: { lineHeight: 0 } }
},
'data-ui-id': 'participant-list-remove-participant-button'
});
}
return menuItems;
};
const canRemoveParticipants = (role) => {
// TODO: We should be using the removeParticipant capability here but there is an SDK bug for Rooms where a
// Presenter's removeParticipant capability is {isPresent: false, reason: 'CapabilityNotApplicableForTheCallType'}.
// But a Presenter in Rooms should be able to remove participants according to the following documentation
// https://learn.microsoft.com/en-us/azure/communication-services/concepts/rooms/room-concept#predefined-participant-roles-and-permissions
const canRemove = role === 'Presenter' || role === 'Unknown' || role === undefined;
return canRemove;
};
//# sourceMappingURL=PeoplePaneContent.js.map