diff --git a/react/features/base/conference/reducer.ts b/react/features/base/conference/reducer.ts index 00d0017f2..091da229e 100644 --- a/react/features/base/conference/reducer.ts +++ b/react/features/base/conference/reducer.ts @@ -50,7 +50,7 @@ export interface IConferenceState { authEnabled?: boolean|undefined; authLogin?: string|undefined; authRequired?: Object; - conference: Object|undefined; + conference: any|undefined; conferenceTimestamp?: number; e2eeSupported: boolean|undefined; followMeEnabled?: boolean; diff --git a/react/features/base/ui/components/web/ClickableIcon.tsx b/react/features/base/ui/components/web/ClickableIcon.tsx new file mode 100644 index 000000000..ba2739225 --- /dev/null +++ b/react/features/base/ui/components/web/ClickableIcon.tsx @@ -0,0 +1,53 @@ +import { makeStyles } from '@material-ui/core'; +import clsx from 'clsx'; +import React from 'react'; + +import { isMobileBrowser } from '../../../environment/utils'; +import Icon from '../../../icons/components/Icon'; +import { Theme } from '../../types'; + +interface IProps { + accessibilityLabel: string; + icon: Function; + onClick: () => void; +} + +const useStyles = makeStyles((theme: Theme) => { + return { + button: { + padding: '2px', + backgroundColor: theme.palette.action03, + border: 0, + outline: 0, + borderRadius: `${theme.shape.borderRadius}px`, + + '&:hover': { + backgroundColor: theme.palette.ui02 + }, + + '&:active': { + backgroundColor: theme.palette.ui03 + }, + + '&.is-mobile': { + padding: '10px' + } + } + }; +}); + +const ClickableIcon = ({ accessibilityLabel, icon, onClick }: IProps) => { + const styles = useStyles(); + const isMobile = isMobileBrowser(); + + return (); +}; + +export default ClickableIcon; diff --git a/react/features/participants-pane/components/web/ParticipantsPane.js b/react/features/participants-pane/components/web/ParticipantsPane.tsx similarity index 85% rename from react/features/participants-pane/components/web/ParticipantsPane.js rename to react/features/participants-pane/components/web/ParticipantsPane.tsx index 93dbb0e94..d360443aa 100644 --- a/react/features/participants-pane/components/web/ParticipantsPane.js +++ b/react/features/participants-pane/components/web/ParticipantsPane.tsx @@ -1,36 +1,50 @@ -// @flow - +/* eslint-disable lines-around-comment */ import { withStyles } from '@material-ui/core'; import React, { Component } from 'react'; +import { WithTranslation } from 'react-i18next'; +import { IState } from '../../../app/types'; import participantsPaneTheme from '../../../base/components/themes/participantsPaneTheme.json'; +// @ts-ignore import { openDialog } from '../../../base/dialog'; -import { translate } from '../../../base/i18n'; -import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons'; +import { translate } from '../../../base/i18n/functions'; +import { IconClose, IconHorizontalPoints } from '../../../base/icons/svg/index'; +// @ts-ignore import { isLocalParticipantModerator } from '../../../base/participants/functions'; -import { connect } from '../../../base/redux'; +import { connect } from '../../../base/redux/functions'; import Button from '../../../base/ui/components/web/Button'; +import ClickableIcon from '../../../base/ui/components/web/ClickableIcon'; import { BUTTON_TYPES } from '../../../base/ui/constants'; +import { Theme } from '../../../base/ui/types'; +// @ts-ignore import { isAddBreakoutRoomButtonVisible } from '../../../breakout-rooms/functions'; +// @ts-ignore import { MuteEveryoneDialog } from '../../../video-menu/components/'; +// @ts-ignore import { close } from '../../actions'; import { findAncestorByClass, getParticipantsPaneOpen, isMoreActionsVisible, isMuteAllVisible + // @ts-ignore } from '../../functions'; +// @ts-ignore import { AddBreakoutRoomButton } from '../breakout-rooms/components/web/AddBreakoutRoomButton'; +// @ts-ignore import { RoomList } from '../breakout-rooms/components/web/RoomList'; +// @ts-ignore import { FooterContextMenu } from './FooterContextMenu'; +// @ts-ignore import LobbyParticipants from './LobbyParticipants'; +// @ts-ignore import MeetingParticipants from './MeetingParticipants'; /** * The type of the React {@code Component} props of {@link ParticipantsPane}. */ -type Props = { +interface Props extends WithTranslation { /** * Whether there is backend support for Breakout Rooms. @@ -52,6 +66,11 @@ type Props = { */ _showAddRoomButton: boolean, + /** + * Whether to show the footer menu. + */ + _showFooter: boolean, + /** * Whether to show the more actions button. */ @@ -63,25 +82,15 @@ type Props = { _showMuteAllButton: boolean, /** - * Whether to show the footer menu. + * An object containing the CSS classes. */ - _showFooter: boolean, + classes: any, /** * The Redux dispatch function. */ - dispatch: Function, - - /** - * An object containing the CSS classes. - */ - classes: Object, - - /** - * The i18n translate function. - */ - t: Function -}; + dispatch: Function +} /** * The type of the React {@code Component} state of {@link ParticipantsPane}. @@ -99,7 +108,7 @@ type State = { searchString: string }; -const styles = theme => { +const styles = (theme: Theme) => { return { container: { boxSizing: 'border-box', @@ -170,7 +179,7 @@ class ParticipantsPane extends Component { * * @inheritdoc */ - constructor(props) { + constructor(props: Props) { super(props); this.state = { @@ -181,7 +190,6 @@ class ParticipantsPane extends Component { // Bind event handlers so they are only bound once per instance. this._onClosePane = this._onClosePane.bind(this); this._onDrawerClose = this._onDrawerClose.bind(this); - this._onKeyPress = this._onKeyPress.bind(this); this._onMuteAll = this._onMuteAll.bind(this); this._onToggleContext = this._onToggleContext.bind(this); this._onWindowClickListener = this._onWindowClickListener.bind(this); @@ -235,17 +243,10 @@ class ParticipantsPane extends Component {
-
- -
+
@@ -286,22 +287,18 @@ class ParticipantsPane extends Component { ); } - setSearchString: (string) => void; - /** * Sets the search string. * * @param {string} newSearchString - The new search string. * @returns {void} */ - setSearchString(newSearchString) { + setSearchString(newSearchString: string) { this.setState({ searchString: newSearchString }); } - _onClosePane: () => void; - /** * Callback for closing the participant pane. * @@ -312,8 +309,6 @@ class ParticipantsPane extends Component { this.props.dispatch(close()); } - _onDrawerClose: () => void; - /** * Callback for closing the drawer. * @@ -326,24 +321,6 @@ class ParticipantsPane extends Component { }); } - _onKeyPress: (Object) => void; - - /** - * KeyPress handler for accessibility for closing the participants pane. - * - * @param {Object} e - The key event to handle. - * - * @returns {void} - */ - _onKeyPress(e) { - if (e.key === ' ' || e.key === 'Enter') { - e.preventDefault(); - this._onClosePane(); - } - } - - _onMuteAll: () => void; - /** * The handler for clicking mute all button. * @@ -353,8 +330,6 @@ class ParticipantsPane extends Component { this.props.dispatch(openDialog(MuteEveryoneDialog)); } - _onToggleContext: () => void; - /** * Handler for toggling open/close of the footer context menu. * @@ -366,15 +341,13 @@ class ParticipantsPane extends Component { }); } - _onWindowClickListener: (event: Object) => void; - /** * Window click event listener. * * @param {Event} e - The click event. * @returns {void} */ - _onWindowClickListener(e) { + _onWindowClickListener(e: any) { if (this.state.contextOpen && !findAncestorByClass(e.target, this.props.classes.footerMoreContainer)) { this.setState({ contextOpen: false @@ -393,7 +366,7 @@ class ParticipantsPane extends Component { * @protected * @returns {Props} */ -function _mapStateToProps(state: Object) { +function _mapStateToProps(state: IState) { const isPaneOpen = getParticipantsPaneOpen(state); const { conference } = state['features/base/conference']; const _isBreakoutRoomsSupported = conference?.getBreakoutRooms()?.isSupported(); @@ -408,4 +381,5 @@ function _mapStateToProps(state: Object) { }; } +// @ts-ignore export default translate(connect(_mapStateToProps)(withStyles(styles)(ParticipantsPane)));