feat(remote-participant-menu) Enhance remote participant menu:

- option to hide the context menu
- option to hide private chat button

config.js

@@ -998,10 +998,14 @@ var config = {
 
     // Options related to the remote participant menu.
     // remoteVideoMenu: {
+    //     // Whether the remote video context menu to be rendered or not.
+    //     disabled: true,
     //     // If set to true the 'Kick out' button will be disabled.
     //     disableKick: true,
     //     // If set to true the 'Grant moderator' button will be disabled.
-    //     disableGrantModerator: true
+    //     disableGrantModerator: true,
+    //     // If set to true the 'Send private message' button will be disabled.
+    //     disablePrivateChat: true
     // },
 
     // Endpoint that enables support for salesforce integration with in-meeting resource linking

react/features/participants-pane/actions.native.js

@@ -42,9 +42,15 @@ export function showConnectionStatus(participantID: string) {
  * @returns {Function}
  */
 export function showContextMenuDetails(participantId: string, local: boolean = false) {
-    return local
-        ? openDialog(LocalVideoMenu)
-        : openDialog(RemoteVideoMenu, { participantId });
+    return (dispatch: Dispatch<any>, getState: Function) => {
+        const { remoteVideoMenu } = getState()['features/base/config'];
+
+        if (local) {
+            dispatch(openDialog(LocalVideoMenu));
+        } else if (!remoteVideoMenu?.disabled) {
+            dispatch(openDialog(RemoteVideoMenu, { participantId }));
+        }
+    };
 }
 
 /**

react/features/video-menu/components/native/RemoteVideoMenu.js

@@ -65,6 +65,11 @@ type Props = {
      */
     _disableKick: boolean,
 
+    /**
+     * Whether or not to display the send private message button.
+     */
+    _disablePrivateChat: Boolean,
+
     /**
      * Whether or not to display the remote mute buttons.
      */
@@ -128,6 +133,7 @@ class RemoteVideoMenu extends PureComponent<Props> {
     render() {
         const {
             _disableKick,
+            _disablePrivateChat,
             _disableRemoteMute,
             _disableGrantModerator,
             _isParticipantAvailable,
@@ -156,7 +162,7 @@ class RemoteVideoMenu extends PureComponent<Props> {
                 { !_disableKick && <KickButton { ...buttonProps } /> }
                 { !_disableGrantModerator && <GrantModeratorButton { ...buttonProps } /> }
                 <PinButton { ...buttonProps } />
-                <PrivateMessageButton { ...buttonProps } />
+                { !_disablePrivateChat && <PrivateMessageButton { ...buttonProps } /> }
                 <ConnectionStatusButton { ...buttonProps } />
                 {_rooms.length > 1 && <>
                     <Divider style = { styles.divider } />
@@ -232,17 +238,17 @@ function _mapStateToProps(state, ownProps) {
     const { participantId } = ownProps;
     const { remoteVideoMenu = {}, disableRemoteMute } = state['features/base/config'];
     const isParticipantAvailable = getParticipantById(state, participantId);
-    let { disableKick } = remoteVideoMenu;
+    const { disableKick, disablePrivateChat } = remoteVideoMenu;
     const _rooms = Object.values(getBreakoutRooms(state));
     const _currentRoomId = getCurrentRoomId(state);
-
-    disableKick = disableKick || !kickOutEnabled;
+    const shouldDisableKick = disableKick || !kickOutEnabled;
 
     return {
         _bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'),
         _currentRoomId,
-        _disableKick: Boolean(disableKick),
+        _disableKick: Boolean(shouldDisableKick),
         _disableRemoteMute: Boolean(disableRemoteMute),
+        _disablePrivateChat: Boolean(disablePrivateChat),
         _isOpen: isDialogOpen(state, RemoteVideoMenu_),
         _isParticipantAvailable: Boolean(isParticipantAvailable),
         _participantDisplayName: getParticipantDisplayName(state, participantId),

react/features/video-menu/components/web/ParticipantContextMenu.js

@@ -138,7 +138,7 @@ const ParticipantContextMenu = ({
     const _overflowDrawer = useSelector(showOverflowDrawer);
     const { remoteVideoMenu = {}, disableRemoteMute, startSilent }
         = useSelector(state => state['features/base/config']);
-    const { disableKick, disableGrantModerator } = remoteVideoMenu;
+    const { disableKick, disableGrantModerator, disablePrivateChat } = remoteVideoMenu;
     const { participantsVolume } = useSelector(state => state['features/filmstrip']);
     const _volume = (participant?.local ?? true ? undefined
         : participant?.id ? participantsVolume[participant?.id] : undefined) ?? 1;
@@ -231,11 +231,12 @@ const ParticipantContextMenu = ({
         }
     }
 
-    buttons2.push(
-        <PrivateMessageMenuButton
+    if (!disablePrivateChat) {
+        buttons2.push(<PrivateMessageMenuButton
             key = 'privateMessage'
             participantID = { _getCurrentParticipantId() } />
-    );
+        );
+    }
 
     if (thumbnailMenu && isMobileBrowser()) {
         buttons2.push(

react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.js

@@ -86,6 +86,11 @@ type Props = {
      */
     participantID: string,
 
+    /**
+     * Whether the remote video context menu is disabled.
+     */
+    _disabled: Boolean,
+
     /**
      * The ID for the participant on which the remote video menu will act.
      */
@@ -151,6 +156,7 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
      */
     render() {
         const {
+            _disabled,
             _overflowDrawer,
             _showConnectionInfo,
             _participantDisplayName,
@@ -159,9 +165,13 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
             participantID,
             popoverVisible
         } = this.props;
-        const content = _showConnectionInfo
-            ? <ConnectionIndicatorContent participantId = { participantID } />
-            : this._renderRemoteVideoMenu();
+        let content;
+
+        if (_showConnectionInfo) {
+            content = <ConnectionIndicatorContent participantId = { participantID } />;
+        } else if (!_disabled) {
+            content = this._renderRemoteVideoMenu();
+        }
 
         if (!content) {
             return null;
@@ -177,7 +187,7 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
                 onPopoverOpen = { this._onPopoverOpen }
                 position = { this.props._menuPosition }
                 visible = { popoverVisible }>
-                {!_overflowDrawer && buttonVisible && (
+                {!_overflowDrawer && buttonVisible && !_disabled && (
                     <span
                         className = { classes.triggerButton }
                         role = 'button'>
@@ -266,6 +276,7 @@ function _mapStateToProps(state, ownProps) {
     const activeParticipant = requestedParticipant || controlled;
     const { overflowDrawer } = state['features/toolbox'];
     const { showConnectionInfo } = state['features/base/connection'];
+    const { remoteVideoMenu } = state['features/base/config'];
 
     if (_supportsRemoteControl
             && ((!active && !_isRemoteControlSessionActive) || activeParticipant === participantID)) {
@@ -296,6 +307,7 @@ function _mapStateToProps(state, ownProps) {
     }
 
     return {
+        _disabled: remoteVideoMenu?.disabled,
         _menuPosition,
         _overflowDrawer: overflowDrawer,
         _participant: participant,