communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
245 lines • 12.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