haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Robert Pintilii 2022-08-01 10:05:17 +03:00 committed by GitHub
parent 30a0a624a2
commit 8e0cb583af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 121 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
react/features/base/ui/components/web/Button.tsx
View File

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

5
react/features/filmstrip/components/web/VideoMenuTriggerButton.js → react/features/filmstrip/components/web/VideoMenuTriggerButton.tsx
View File

@ -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 = {

122
react/features/video-menu/components/web/LocalVideoMenuTriggerButton.js → react/features/video-menu/components/web/LocalVideoMenuTriggerButton.tsx
View File

@ -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',
display: 'inline-block',
padding: '3px !important',
borderRadius: '4px'
},
@ -215,26 +234,18 @@ class LocalVideoMenuTriggerButton extends Component<Props> {
overflowDrawer = { _overflowDrawer }
position = { _menuPosition }
visible = { popoverVisible }>
{!_overflowDrawer && buttonVisible && (
<span
{!_overflowDrawer && buttonVisible && !isMobileBrowser() && (
<Button
accessibilityLabel = { t('dialog.localUserControls') }
className = { classes.triggerButton }
role = 'button'>
{!isMobileBrowser() && <Icon
ariaLabel = { t('dialog.localUserControls') }
size = { 18 }
src = { IconHorizontalPoints }
tabIndex = { 0 }
title = { t('dialog.localUserControls') } />
}
</span>
icon = { IconHorizontalPoints }
size = 'small' />
)}
</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)));

102
react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.js → react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.tsx
View File

@ -1,26 +1,34 @@
// @flow
/* eslint-disable react/jsx-handler-names */
/* 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';
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,
/**
* Whether the popover is visible or not.
*/
popoverVisible: boolean,
/**
* Shows popover.
*/
showPopover: Function,
_disabled: Boolean,
/**
* 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,
/**
* Whether the popover should render the Connection Info stats.
*/
_showConnectionInfo: Boolean,
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',
display: 'inline-block',
padding: '3px !important',
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'>
{!isMobileBrowser() && <Icon
ariaLabel = { this.props.t('dialog.remoteUserControls', { username }) }
size = { 18 }
src = { IconHorizontalPoints }
tabIndex = { 0 }
title = { this.props.t('dialog.remoteUserControls', { username }) } />
}
</span>
icon = { IconHorizontalPoints }
size = 'small' />
)}
</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)));