ref(thumbnail) Use new button component for video menu trigger (#11921)

react/features/base/ui/components/web/Button.tsx

@@ -203,6 +203,7 @@ const Button = ({
             disabled = { disabled }
             { ...(id ? { id } : {}) }
             onClick = { onClick }
+            title = { accessibilityLabel }
             type = { isSubmit ? 'submit' : 'button' }>
             {icon && <Icon
                 size = { 20 }

react/features/filmstrip/components/web/VideoMenuTriggerButton.tsx

@@ -1,8 +1,7 @@
-// @flow
-
 import React from 'react';
 
-import { LocalVideoMenuTriggerButton, RemoteVideoMenuTriggerButton } from '../../../video-menu';
+import LocalVideoMenuTriggerButton from '../../../video-menu/components/web/LocalVideoMenuTriggerButton';
+import RemoteVideoMenuTriggerButton from '../../../video-menu/components/web/RemoteVideoMenuTriggerButton';
 
 type Props = {
 

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

@@ -1,30 +1,46 @@
-// @flow
+/* eslint-disable lines-around-comment */
-
 import { withStyles } from '@material-ui/styles';
 import React, { Component } from 'react';
-import { batch } from 'react-redux';
+import { batch, connect } from 'react-redux';
 
+// @ts-ignore
 import ContextMenu from '../../../base/components/context-menu/ContextMenu';
+// @ts-ignore
 import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
+// @ts-ignore
 import { isMobileBrowser } from '../../../base/environment/utils';
+// @ts-ignore
 import { translate } from '../../../base/i18n';
-import { Icon, IconHorizontalPoints } from '../../../base/icons';
+import { IconHorizontalPoints } from '../../../base/icons/svg/index';
 import {
     getLocalParticipant
+    // @ts-ignore
 } from '../../../base/participants';
+// @ts-ignore
 import { Popover } from '../../../base/popover';
-import { connect } from '../../../base/redux';
+// @ts-ignore
 import { setParticipantContextMenuOpen } from '../../../base/responsive-ui/actions';
+// @ts-ignore
 import { getHideSelfView } from '../../../base/settings';
+// @ts-ignore
 import { getLocalVideoTrack } from '../../../base/tracks';
+import Button from '../../../base/ui/components/web/Button';
+// @ts-ignore
 import ConnectionIndicatorContent from '../../../connection-indicator/components/web/ConnectionIndicatorContent';
+// @ts-ignore
 import { THUMBNAIL_TYPE } from '../../../filmstrip';
+// @ts-ignore
 import { isStageFilmstripAvailable } from '../../../filmstrip/functions.web';
+// @ts-ignore
 import { renderConnectionStatus } from '../../actions.web';
 
+// @ts-ignore
 import ConnectionStatusButton from './ConnectionStatusButton';
+// @ts-ignore
 import FlipLocalVideoButton from './FlipLocalVideoButton';
+// @ts-ignore
 import HideSelfViewVideoButton from './HideSelfViewVideoButton';
+// @ts-ignore
 import TogglePinToStageButton from './TogglePinToStageButton';
 
 /**
@@ -33,36 +49,6 @@ import TogglePinToStageButton from './TogglePinToStageButton';
  */
 type Props = {
 
-    /**
-     * Whether or not the button should be visible.
-     */
-    buttonVisible: boolean,
-
-    /**
-     * An object containing the CSS classes.
-     */
-    classes: Object,
-
-    /**
-     * The redux dispatch function.
-     */
-    dispatch: Function,
-
-    /**
-     * Hides popover.
-     */
-    hidePopover: Function,
-
-    /**
-     * Whether the popover is visible or not.
-     */
-    popoverVisible: boolean,
-
-    /**
-     * Shows popover.
-     */
-    showPopover: Function,
-
     /**
      * The id of the local participant.
      */
@@ -100,18 +86,51 @@ type Props = {
      */
     _showPinToStage: boolean,
 
+    /**
+     * Whether or not the button should be visible.
+     */
+    buttonVisible: boolean,
+
+    /**
+     * An object containing the CSS classes.
+     */
+    classes: any,
+
+    /**
+     * The redux dispatch function.
+     */
+    dispatch: Function,
+
+    /**
+     * Hides popover.
+     */
+    hidePopover: Function,
+
+    /**
+     * Whether the popover is visible or not.
+     */
+    popoverVisible: boolean,
+
+    /**
+     * Shows popover.
+     */
+    showPopover: Function,
+
     /**
      * Invoked to obtain translated strings.
      */
-    t: Function
+    t: Function,
+
+    /**
+     * The type of the thumbnail.
+     */
+    thumbnailType: string
 };
 
-const styles = theme => {
+const styles = () => {
     return {
         triggerButton: {
-            backgroundColor: theme.palette.action01,
+            padding: '3px !important',
-            padding: '3px',
-            display: 'inline-block',
             borderRadius: '4px'
         },
 
@@ -215,26 +234,18 @@ class LocalVideoMenuTriggerButton extends Component<Props> {
                     overflowDrawer = { _overflowDrawer }
                     position = { _menuPosition }
                     visible = { popoverVisible }>
-                    {!_overflowDrawer && buttonVisible && (
+                    {!_overflowDrawer && buttonVisible && !isMobileBrowser() && (
-                        <span
+                        <Button
+                            accessibilityLabel = { t('dialog.localUserControls') }
                             className = { classes.triggerButton }
-                            role = 'button'>
+                            icon = { IconHorizontalPoints }
-                            {!isMobileBrowser() && <Icon
+                            size = 'small' />
-                                ariaLabel = { t('dialog.localUserControls') }
-                                size = { 18 }
-                                src = { IconHorizontalPoints }
-                                tabIndex = { 0 }
-                                title = { t('dialog.localUserControls') } />
-                            }
-                        </span>
                     )}
                 </Popover>
                 : null
         );
     }
 
-    _onPopoverOpen: () => void;
-
     /**
      * Disable and hide toolbox while context menu is open.
      *
@@ -247,8 +258,6 @@ class LocalVideoMenuTriggerButton extends Component<Props> {
         dispatch(setParticipantContextMenuOpen(true));
     }
 
-    _onPopoverClose: () => void;
-
     /**
      * Render normal context menu next time popover dialog opens.
      *
@@ -273,7 +282,7 @@ class LocalVideoMenuTriggerButton extends Component<Props> {
  * @private
  * @returns {Props}
  */
-function _mapStateToProps(state, ownProps) {
+function _mapStateToProps(state: any, ownProps: Partial<Props>) {
     const { thumbnailType } = ownProps;
     const localParticipant = getLocalParticipant(state);
     const { disableLocalVideoFlip, disableSelfViewSettings } = state['features/base/config'];
@@ -309,4 +318,5 @@ function _mapStateToProps(state, ownProps) {
     };
 }
 
+// @ts-ignore
 export default translate(connect(_mapStateToProps)(withStyles(styles)(LocalVideoMenuTriggerButton)));

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

@@ -1,26 +1,34 @@
-// @flow
+/* eslint-disable lines-around-comment */
-
-/* eslint-disable react/jsx-handler-names */
 import { withStyles } from '@material-ui/styles';
 import React, { Component } from 'react';
-import { batch } from 'react-redux';
+import { batch, connect } from 'react-redux';
 
-import ConnectionIndicatorContent from
-    '../../../../features/connection-indicator/components/web/ConnectionIndicatorContent';
 import { isMobileBrowser } from '../../../base/environment/utils';
+// @ts-ignore
 import { translate } from '../../../base/i18n';
-import { Icon, IconHorizontalPoints } from '../../../base/icons';
+import { IconHorizontalPoints } from '../../../base/icons/svg/index';
+// @ts-ignore
 import { getParticipantById } from '../../../base/participants';
+// @ts-ignore
 import { Popover } from '../../../base/popover';
-import { connect } from '../../../base/redux';
+// @ts-ignore
 import { setParticipantContextMenuOpen } from '../../../base/responsive-ui/actions';
+import Button from '../../../base/ui/components/web/Button';
+import ConnectionIndicatorContent from
+// @ts-ignore
+    '../../../connection-indicator/components/web/ConnectionIndicatorContent';
+// @ts-ignore
 import { THUMBNAIL_TYPE } from '../../../filmstrip';
+// @ts-ignore
 import { renderConnectionStatus } from '../../actions.web';
 
+// @ts-ignore
 import ParticipantContextMenu from './ParticipantContextMenu';
+// @ts-ignore
 import { REMOTE_CONTROL_MENU_STATES } from './RemoteControlButton';
 
 
+// eslint-disable-next-line no-var, @typescript-eslint/no-unused-vars
 declare var $: Object;
 
 /**
@@ -30,19 +38,9 @@ declare var $: Object;
 type Props = {
 
     /**
-     * Hides popover.
+     * Whether the remote video context menu is disabled.
      */
-    hidePopover: Function,
+    _disabled: Boolean,
-
-    /**
-     * Whether the popover is visible or not.
-     */
-    popoverVisible: boolean,
-
-    /**
-     * Shows popover.
-     */
-    showPopover: Function,
 
     /**
      * The position relative to the trigger the remote menu should display
@@ -61,11 +59,21 @@ type Props = {
      */
     _participant: Object,
 
+    /**
+     * The ID for the participant on which the remote video menu will act.
+     */
+    _participantDisplayName: string,
+
     /**
      * The current state of the participant's remote control session.
      */
     _remoteControlState: number,
 
+    /**
+     * Whether the popover should render the Connection Info stats.
+     */
+    _showConnectionInfo: Boolean,
+
     /**
      * Whether or not the button should be visible.
      */
@@ -74,45 +82,48 @@ type Props = {
     /**
      * An object containing the CSS classes.
      */
-    classes: Object,
+    classes: any,
 
     /**
      * The redux dispatch function.
      */
     dispatch: Function,
 
+    /**
+     * Hides popover.
+     */
+    hidePopover: Function,
+
     /**
      * The ID for the participant on which the remote video menu will act.
      */
     participantID: string,
 
     /**
-     * Whether the remote video context menu is disabled.
+     * Whether the popover is visible or not.
      */
-    _disabled: Boolean,
+    popoverVisible: boolean,
 
     /**
-     * The ID for the participant on which the remote video menu will act.
+     * Shows popover.
      */
-    _participantDisplayName: string,
+    showPopover: Function,
-
-    /**
-     * Whether the popover should render the Connection Info stats.
-     */
-    _showConnectionInfo: Boolean,
 
     /**
      * Invoked to obtain translated strings.
      */
-    t: Function
+    t: Function,
+
+    /**
+     * The type of the thumbnail.
+     */
+    thumbnailType: string
 };
 
-const styles = theme => {
+const styles = () => {
     return {
         triggerButton: {
-            backgroundColor: theme.palette.action01,
+            padding: '3px !important',
-            padding: '3px',
-            display: 'inline-block',
             borderRadius: '4px'
         },
 
@@ -188,24 +199,16 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
                 position = { this.props._menuPosition }
                 visible = { popoverVisible }>
                 {!_overflowDrawer && buttonVisible && !_disabled && (
-                    <span
+                    !isMobileBrowser() && <Button
+                        accessibilityLabel = { this.props.t('dialog.remoteUserControls', { username }) }
                         className = { classes.triggerButton }
-                        role = 'button'>
+                        icon = { IconHorizontalPoints }
-                        {!isMobileBrowser() && <Icon
+                        size = 'small' />
-                            ariaLabel = { this.props.t('dialog.remoteUserControls', { username }) }
-                            size = { 18 }
-                            src = { IconHorizontalPoints }
-                            tabIndex = { 0 }
-                            title = { this.props.t('dialog.remoteUserControls', { username }) } />
-                        }
-                    </span>
                 )}
             </Popover>
         );
     }
 
-    _onPopoverOpen: () => void;
-
     /**
      * Disable and hide toolbox while context menu is open.
      *
@@ -218,8 +221,6 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
         dispatch(setParticipantContextMenuOpen(true));
     }
 
-    _onPopoverClose: () => void;
-
     /**
      * Render normal context menu next time popover dialog opens.
      *
@@ -264,7 +265,7 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
  * @private
  * @returns {Props}
  */
-function _mapStateToProps(state, ownProps) {
+function _mapStateToProps(state: any, ownProps: Partial<Props>) {
     const { participantID, thumbnailType } = ownProps;
     let _remoteControlState = null;
     const participant = getParticipantById(state, participantID);
@@ -317,4 +318,5 @@ function _mapStateToProps(state, ownProps) {
 }
 
 export default translate(connect(_mapStateToProps)(
+    // @ts-ignore
     withStyles(styles)(RemoteVideoMenuTriggerButton)));