fix(context-menu) Hide toolbars when participant context menu opened (#9842)

- hide toolbars only when in tile view
- fix community issue: https://github.com/jitsi/jitsi-meet/issues/9818

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

@@ -12,6 +12,8 @@ import { Popover } from '../../../base/popover';
 import { connect } from '../../../base/redux';
 import { getLocalVideoTrack } from '../../../base/tracks';
 import ConnectionIndicatorContent from '../../../connection-indicator/components/web/ConnectionIndicatorContent';
+import { setToolboxEnabled, disableToolboxOnTileView } from '../../../toolbox/actions';
+import { isToolboxEnabled } from '../../../toolbox/functions';
 import { getCurrentLayout, LAYOUTS } from '../../../video-layout';
 import { renderConnectionStatus } from '../../actions.web';
 
@@ -63,6 +65,11 @@ type Props = {
      */
     _showLocalVideoFlipButton: boolean,
 
+    /**
+     * Whether the toolbox is enabled or not.
+     */
+    _toolboxEnabled: boolean,
+
     /**
      * Invoked to obtain translated strings.
      */
@@ -76,6 +83,11 @@ type Props = {
  * @extends {Component}
  */
 class LocalVideoMenuTriggerButton extends Component<Props> {
+    /**
+     * Preserve the intial toolbox state.
+     */
+     initialToolboxEnabled: boolean;
+
     /**
      * Reference to the Popover instance.
      */
@@ -91,7 +103,9 @@ class LocalVideoMenuTriggerButton extends Component<Props> {
         super(props);
 
         this.popoverRef = React.createRef();
+        this.initialToolboxEnabled = true;
         this._onPopoverClose = this._onPopoverClose.bind(this);
+        this._onPopoverOpen = this._onPopoverOpen.bind(this);
     }
 
     /**
@@ -115,6 +129,8 @@ class LocalVideoMenuTriggerButton extends Component<Props> {
         if (this.props.getRef) {
             this.props.getRef(this);
         }
+
+        this.initialToolboxEnabled = this.props._toolboxEnabled;
     }
 
     /**
@@ -161,6 +177,7 @@ class LocalVideoMenuTriggerButton extends Component<Props> {
                 ? <Popover
                     content = { content }
                     onPopoverClose = { this._onPopoverClose }
+                    onPopoverOpen = { this._onPopoverOpen }
                     overflowDrawer = { _overflowDrawer }
                     position = { _menuPosition }
                     ref = { this.popoverRef }>
@@ -181,6 +198,17 @@ class LocalVideoMenuTriggerButton extends Component<Props> {
         );
     }
 
+    _onPopoverOpen: () => void;
+
+    /**
+     * Disable and hide toolbox while context menu is open.
+     *
+     * @returns {void}
+     */
+    _onPopoverOpen() {
+        this.props.dispatch(disableToolboxOnTileView());
+    }
+
     _onPopoverClose: () => void;
 
     /**
@@ -189,6 +217,7 @@ class LocalVideoMenuTriggerButton extends Component<Props> {
      * @returns {void}
      */
     _onPopoverClose() {
+        this.props.dispatch(setToolboxEnabled(this.initialToolboxEnabled));
         this.props.dispatch(renderConnectionStatus(false));
     }
 }
@@ -226,7 +255,8 @@ function _mapStateToProps(state) {
         _showLocalVideoFlipButton: !disableLocalVideoFlip && videoTrack?.videoType !== 'desktop',
         _overflowDrawer: overflowDrawer,
         _localParticipantId: localParticipant.id,
-        _showConnectionInfo: showConnectionInfo
+        _showConnectionInfo: showConnectionInfo,
+        _toolboxEnabled: isToolboxEnabled(state)
     };
 }