@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
261 lines • 13.9 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { _formatString } from "../../../../acs-ui-common/src";
import { useMemo } from 'react';
import { _preventDismissOnEvent as preventDismissOnEvent } from "../../../../acs-ui-common/src";
/**
* @private
*/
export const useVideoTileContextualMenuProps = (props) => {
var _a;
const { participant, view, strings, isPinned, onPinParticipant, onUnpinParticipant, onUpdateScalingMode, disablePinMenuItem, toggleAnnouncerString, spotlightedParticipantUserIds = [], isSpotlighted, onStartSpotlight, onStopSpotlight, maxParticipantsToSpotlight, myUserId, onMuteParticipant, onForbidAudio, onPermitAudio, onForbidVideo, onPermitVideo } = props;
const scalingMode = useMemo(() => {
var _a;
return (_a = props.participant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode;
}, [(_a = props.participant.videoStream) === null || _a === void 0 ? void 0 : _a.scalingMode]);
const contextualMenuProps = useMemo(() => {
var _a, _b;
const items = [];
if (onMuteParticipant && (strings === null || strings === void 0 ? void 0 : strings.muteParticipantMenuItemLabel)) {
items.push({
key: 'mute',
text: strings === null || strings === void 0 ? void 0 : strings.muteParticipantMenuItemLabel,
iconProps: {
iconName: 'ContextualMenuMicMutedIcon',
styles: {
root: {
lineHeight: 0
}
}
},
onClick: () => onMuteParticipant(participant.userId),
'data-ui-id': 'video-tile-mute-participant',
ariaLabel: strings === null || strings === void 0 ? void 0 : strings.muteParticipantMenuItemLabel,
disabled: participant.isMuted
});
}
if (participant.canAudioBeForbidden && participant.mediaAccess && !participant.mediaAccess.isAudioPermitted && onPermitAudio) {
items.push({
key: 'permitAudio',
text: strings === null || strings === void 0 ? void 0 : strings.permitAudioTileMenuLabel,
iconProps: {
iconName: 'ControlButtonMicOn',
styles: {
root: {
lineHeight: 0
}
}
},
onClick: () => onPermitAudio([participant.userId]),
'data-ui-id': 'video-tile-permit-audio',
ariaLabel: strings === null || strings === void 0 ? void 0 : strings.permitAudioTileMenuLabel
});
}
if (participant.canAudioBeForbidden && ((_a = participant.mediaAccess) === null || _a === void 0 ? void 0 : _a.isAudioPermitted) && onForbidAudio) {
items.push({
key: 'forbidAudio',
text: strings === null || strings === void 0 ? void 0 : strings.forbidAudioTileMenuLabel,
iconProps: {
iconName: 'ControlButtonMicProhibited',
styles: {
root: {
lineHeight: 0
}
}
},
onClick: () => onForbidAudio([participant.userId]),
'data-ui-id': 'video-tile-forbid-audio',
ariaLabel: strings === null || strings === void 0 ? void 0 : strings.forbidAudioTileMenuLabel
});
}
if (participant.canVideoBeForbidden && participant.mediaAccess && !participant.mediaAccess.isVideoPermitted && onPermitVideo) {
items.push({
key: 'permitVideo',
text: strings === null || strings === void 0 ? void 0 : strings.permitVideoTileMenuLabel,
iconProps: {
iconName: 'ControlButtonCameraOn',
styles: {
root: {
lineHeight: 0
}
}
},
onClick: () => onPermitVideo([participant.userId]),
'data-ui-id': 'video-tile-permit-video',
ariaLabel: strings === null || strings === void 0 ? void 0 : strings.permitVideoTileMenuLabel
});
}
if (participant.canVideoBeForbidden && ((_b = participant.mediaAccess) === null || _b === void 0 ? void 0 : _b.isVideoPermitted) && onForbidVideo) {
items.push({
key: 'forbidVideo',
text: strings === null || strings === void 0 ? void 0 : strings.forbidVideoTileMenuLabel,
iconProps: {
iconName: 'ControlButtonCameraProhibited',
styles: {
root: {
lineHeight: 0
}
}
},
onClick: () => onForbidVideo([participant.userId]),
'data-ui-id': 'video-tile-forbid-video',
ariaLabel: strings === null || strings === void 0 ? void 0 : strings.forbidVideoTileMenuLabel
});
}
if (isPinned !== undefined) {
if (isPinned && onUnpinParticipant && (strings === null || strings === void 0 ? void 0 : strings.unpinParticipantForMe)) {
let unpinActionString = undefined;
if (toggleAnnouncerString && strings.unpinParticipantMenuItemAriaLabel && participant.displayName) {
unpinActionString = _formatString(strings === null || strings === void 0 ? void 0 : strings.unpinParticipantMenuItemAriaLabel, {
participantName: participant.displayName
});
}
items.push({
key: 'unpin',
text: strings.unpinParticipantForMe,
iconProps: {
iconName: 'UnpinParticipant',
styles: {
root: {
lineHeight: '1rem',
textAlign: 'center'
}
}
},
onClick: () => {
onUnpinParticipant(participant.userId);
unpinActionString && (toggleAnnouncerString === null || toggleAnnouncerString === void 0 ? void 0 : toggleAnnouncerString(unpinActionString));
},
'data-ui-id': 'video-tile-unpin-participant-button',
ariaLabel: unpinActionString
});
}
if (!isPinned && onPinParticipant && (strings === null || strings === void 0 ? void 0 : strings.pinParticipantForMe)) {
let pinActionString = undefined;
if (toggleAnnouncerString && strings.pinnedParticipantAnnouncementAriaLabel && participant.displayName) {
pinActionString = _formatString(strings === null || strings === void 0 ? void 0 : strings.pinnedParticipantAnnouncementAriaLabel, {
participantName: participant.displayName
});
}
items.push({
key: 'pin',
text: disablePinMenuItem ? strings.pinParticipantForMeLimitReached : strings.pinParticipantForMe,
iconProps: {
iconName: 'PinParticipant',
styles: {
root: {
lineHeight: '1rem',
textAlign: 'center'
}
}
},
onClick: () => {
onPinParticipant(participant.userId);
pinActionString && (toggleAnnouncerString === null || toggleAnnouncerString === void 0 ? void 0 : toggleAnnouncerString(pinActionString));
},
'data-ui-id': 'video-tile-pin-participant-button',
disabled: disablePinMenuItem || isSpotlighted,
ariaLabel: strings.pinParticipantForMe
});
}
}
if (isSpotlighted) {
const stopSpotlightMenuLabel = myUserId === participant.userId ? strings === null || strings === void 0 ? void 0 : strings.stopSpotlightOnSelfVideoTileMenuLabel : strings === null || strings === void 0 ? void 0 : strings.stopSpotlightVideoTileMenuLabel;
if (onStopSpotlight && participant.userId && (strings === null || strings === void 0 ? void 0 : strings.stopSpotlightVideoTileMenuLabel)) {
items.push({
key: 'stopSpotlight',
text: stopSpotlightMenuLabel,
iconProps: {
iconName: 'StopSpotlightContextualMenuItem',
styles: {
root: {
lineHeight: 0
}
}
},
onClick: () => onStopSpotlight([participant.userId]),
ariaLabel: strings.stopSpotlightVideoTileMenuLabel
});
}
}
else {
const startSpotlightMenuLabel = spotlightedParticipantUserIds && spotlightedParticipantUserIds.length > 0 ? strings === null || strings === void 0 ? void 0 : strings.addSpotlightVideoTileMenuLabel : strings === null || strings === void 0 ? void 0 : strings.startSpotlightVideoTileMenuLabel;
const maxSpotlightedParticipantsReached = maxParticipantsToSpotlight ? spotlightedParticipantUserIds.length >= maxParticipantsToSpotlight : false;
if (onStartSpotlight && participant.userId && startSpotlightMenuLabel) {
items.push({
key: 'startSpotlight',
text: startSpotlightMenuLabel,
iconProps: {
iconName: 'StartSpotlightContextualMenuItem',
styles: {
root: {
lineHeight: 0
}
}
},
onClick: () => onStartSpotlight([participant.userId]),
ariaLabel: startSpotlightMenuLabel,
disabled: maxSpotlightedParticipantsReached,
title: maxSpotlightedParticipantsReached ? strings === null || strings === void 0 ? void 0 : strings.spotlightLimitReachedMenuTitle : undefined
});
}
}
if (scalingMode) {
if (scalingMode === 'Crop' && (strings === null || strings === void 0 ? void 0 : strings.fitRemoteParticipantToFrame)) {
items.push({
key: 'fitRemoteParticipantToFrame',
text: strings.fitRemoteParticipantToFrame,
iconProps: {
iconName: 'VideoTileScaleFit',
styles: {
root: {
lineHeight: '1rem',
textAlign: 'center'
}
}
},
onClick: () => {
onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(participant.userId, 'Fit');
view === null || view === void 0 ? void 0 : view.updateScalingMode('Fit');
},
'data-ui-id': 'video-tile-fit-to-frame',
ariaLabel: strings.fitRemoteParticipantToFrame
});
}
else if (scalingMode === 'Fit' && (strings === null || strings === void 0 ? void 0 : strings.fillRemoteParticipantFrame)) {
items.push({
key: 'fillRemoteParticipantFrame',
text: strings.fillRemoteParticipantFrame,
iconProps: {
iconName: 'VideoTileScaleFill',
styles: {
root: {
lineHeight: '1rem',
textAlign: 'center'
}
}
},
onClick: () => {
onUpdateScalingMode === null || onUpdateScalingMode === void 0 ? void 0 : onUpdateScalingMode(participant.userId, 'Crop');
view === null || view === void 0 ? void 0 : view.updateScalingMode('Crop');
},
'data-ui-id': 'video-tile-fill-frame',
ariaLabel: strings.fillRemoteParticipantFrame
});
}
}
if (items.length === 0) {
return undefined;
}
return {
items,
styles: {},
calloutProps: {
preventDismissOnEvent
},
shouldFocusOnContainer: false
};
}, [onMuteParticipant, strings, participant.isMuted, participant.userId, participant.displayName, isPinned, isSpotlighted, scalingMode, onUnpinParticipant, onPinParticipant, toggleAnnouncerString, disablePinMenuItem, myUserId, onStopSpotlight, spotlightedParticipantUserIds, maxParticipantsToSpotlight, onStartSpotlight, onUpdateScalingMode, view, participant.canAudioBeForbidden, participant.canVideoBeForbidden, participant.mediaAccess, onPermitAudio, onForbidAudio, onPermitVideo, onForbidVideo]);
return contextualMenuProps;
};
//# sourceMappingURL=useVideoTileContextualMenuProps.js.map