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

ref(ui-components) Use new Dialog component (#12351) 

Convert some files to TS
This commit is contained in:
Robert Pintilii 2022-10-11 11:24:11 +03:00 committed by GitHub
parent b858496adb
commit 6423ed8fb5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 79 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
react/features/base/dialog/middleware.web.ts
View File

@ -21,8 +21,14 @@ import SecurityDialog from '../../security/components/security-dialog/web/Securi
import SharedVideoDialog from '../../shared-video/components/web/SharedVideoDialog';
import SpeakerStats from '../../speaker-stats/components/web/SpeakerStats';
import LanguageSelectorDialog from '../../subtitles/components/LanguageSelectorDialog.web';
import GrantModeratorDialog from '../../video-menu/components/web/GrantModeratorDialog';
import KickRemoteParticipantDialog from '../../video-menu/components/web/KickRemoteParticipantDialog';
import MuteEveryoneDialog from '../../video-menu/components/web/MuteEveryoneDialog';
import MuteEveryonesVideoDialog from '../../video-menu/components/web/MuteEveryonesVideoDialog';
import MuteRemoteParticipantsVideoDialog from '../../video-menu/components/web/MuteRemoteParticipantsVideoDialog';
// @ts-ignore
import VideoQualityDialog from '../../video-quality/components/VideoQualityDialog.web';
import VirtualBackgroundDialog from '../../virtual-background/components/VirtualBackgroundDialog';
import MiddlewareRegistry from '../redux/MiddlewareRegistry';
import { OPEN_DIALOG } from './actionTypes';
@ -33,7 +39,9 @@ import { OPEN_DIALOG } from './actionTypes';
const NEW_DIALOG_LIST = [ KeyboardShortcutsDialog, ChatPrivacyDialog, DisplayNamePrompt, EmbedMeetingDialog,
FeedbackDialog, AddPeopleDialog, PremiumFeatureDialog, StartLiveStreamDialog, StopLiveStreamDialog,
StartRecordingDialog, StopRecordingDialog, ShareAudioDialog, ShareScreenWarningDialog, SecurityDialog,
SharedVideoDialog, SpeakerStats, LanguageSelectorDialog, MuteEveryoneDialog, MuteEveryonesVideoDialog ];
SharedVideoDialog, SpeakerStats, LanguageSelectorDialog, MuteEveryoneDialog, MuteEveryonesVideoDialog,
GrantModeratorDialog, KickRemoteParticipantDialog, MuteRemoteParticipantsVideoDialog, VideoQualityDialog,
VirtualBackgroundDialog ];
// This function is necessary while the transition from @atlaskit dialog to our component is ongoing.
const isNewDialog = (component: any) => NEW_DIALOG_LIST.some(comp => comp === component);

4
react/features/base/ui/components/web/ClickableIcon.tsx
View File

@ -8,6 +8,7 @@ import Icon from '../../../icons/components/Icon';
interface IProps {
accessibilityLabel: string;
icon: Function;
id?: string;
onClick: () => void;
}
@ -40,7 +41,7 @@ const useStyles = makeStyles()((theme: Theme) => {
};
});
const ClickableIcon = ({ accessibilityLabel, icon, onClick }: IProps) => {
const ClickableIcon = ({ accessibilityLabel, icon, id, onClick }: IProps) => {
const { classes: styles, cx } = useStyles();
const isMobile = isMobileBrowser();
@ -48,6 +49,7 @@ const ClickableIcon = ({ accessibilityLabel, icon, onClick }: IProps) => {
<button
aria-label = { accessibilityLabel }
className = { cx(styles.button, isMobile && 'is-mobile') }
id = { id }
onClick = { onClick }>
<Icon
size = { 24 }

8
react/features/base/ui/components/web/Dialog.tsx
View File

@ -150,6 +150,7 @@ const useStyles = makeStyles()((theme: Theme) => {
boxSizing: 'border-box',
padding: '0 24px',
overflowX: 'hidden',
minHeight: '40px',
'@media (max-width: 448px)': {
height: '100%'
@ -242,10 +243,15 @@ const Dialog = ({
className = { cx(classes.modal, isUnmounting && 'unmount', size, className) }
role = 'dialog'>
<div className = { classes.header }>
<p className = { classes.title }>{title ?? t(titleKey ?? '')}</p>
<p
className = { classes.title }
id = 'dialog-title'>
{title ?? t(titleKey ?? '')}
</p>
<ClickableIcon
accessibilityLabel = { t('dialog.close') }
icon = { IconClose }
id = 'modal-header-close-button'
onClick = { onClose } />
</div>
<div className = { classes.content }>{children}</div>

36
react/features/video-menu/components/AbstractGrantModeratorDialog.js → react/features/video-menu/components/AbstractGrantModeratorDialog.ts
View File

@ -1,35 +1,29 @@
// @flow
import { Component } from 'react';
import { WithTranslation } from 'react-i18next';
import {
createRemoteVideoMenuButtonEvent,
sendAnalytics
} from '../../analytics';
import { getParticipantById, grantModerator } from '../../base/participants';
import { createRemoteVideoMenuButtonEvent } from '../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../analytics/functions';
import { IState, IStore } from '../../app/types';
import { grantModerator } from '../../base/participants/actions';
import { getParticipantById } from '../../base/participants/functions';
type Props = {
interface Props extends WithTranslation {
/**
* The Redux dispatch function.
*/
dispatch: Function,
dispatch: IStore['dispatch'];
/**
* The ID of the remote participant to be granted moderator rights.
*/
participantID: string,
participantID: string;
/**
* The name of the remote participant to be granted moderator rights.
*/
participantName: string,
/**
* Function to translate i18n labels.
*/
t: Function
};
participantName: string;
}
/**
* Abstract dialog to confirm granting moderator to a participant.
@ -47,8 +41,6 @@ export default class AbstractGrantModeratorDialog
this._onSubmit = this._onSubmit.bind(this);
}
_onSubmit: () => boolean;
/**
* Callback for the confirm button.
*
@ -73,13 +65,13 @@ export default class AbstractGrantModeratorDialog
/**
* Maps (parts of) the Redux state to the associated {@code AbstractMuteEveryoneDialog}'s props.
*
* @param {Object} state - The redux state.
* @param {IState} state - The redux state.
* @param {Object} ownProps - The properties explicitly passed to the component.
* @returns {Props}
*/
export function abstractMapStateToProps(state: Object, ownProps: Props) {
export function abstractMapStateToProps(state: IState, ownProps: Props) {
return {
participantName: getParticipantById(state, ownProps.participantID).name
participantName: getParticipantById(state, ownProps.participantID)?.name
};
}

27
react/features/video-menu/components/AbstractKickRemoteParticipantDialog.js → react/features/video-menu/components/AbstractKickRemoteParticipantDialog.ts
View File

@ -1,30 +1,23 @@
// @flow
import { Component } from 'react';
import { WithTranslation } from 'react-i18next';
import {
createRemoteVideoMenuButtonEvent,
sendAnalytics
} from '../../analytics';
import { kickParticipant } from '../../base/participants';
import { createRemoteVideoMenuButtonEvent } from '../../analytics/AnalyticsEvents';
import { sendAnalytics } from '../../analytics/functions';
import { IStore } from '../../app/types';
import { kickParticipant } from '../../base/participants/actions';
type Props = {
interface Props extends WithTranslation {
/**
* The Redux dispatch function.
*/
dispatch: Function,
dispatch: IStore['dispatch'];
/**
* The ID of the remote participant to be kicked.
*/
participantID: string,
/**
* Function to translate i18n labels.
*/
t: Function
};
participantID: string;
}
/**
* Abstract dialog to confirm a remote participant kick action.
@ -42,8 +35,6 @@ export default class AbstractKickRemoteParticipantDialog
this._onSubmit = this._onSubmit.bind(this);
}
_onSubmit: () => boolean;
/**
* Callback for the confirm button.
*

16
react/features/video-menu/components/web/GrantModeratorDialog.js → react/features/video-menu/components/web/GrantModeratorDialog.tsx
View File

@ -1,12 +1,9 @@
// @flow
import React from 'react';
import { Dialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { connect } from '../../../base/redux';
import AbstractGrantModeratorDialog
, { abstractMapStateToProps } from '../AbstractGrantModeratorDialog';
import { translate } from '../../../base/i18n/functions';
import { connect } from '../../../base/redux/functions';
import Dialog from '../../../base/ui/components/web/Dialog';
import AbstractGrantModeratorDialog, { abstractMapStateToProps } from '../AbstractGrantModeratorDialog';
/**
* Dialog to confirm a grant moderator action.
@ -21,10 +18,9 @@ class GrantModeratorDialog extends AbstractGrantModeratorDialog {
render() {
return (
<Dialog
okKey = 'dialog.Yes'
ok = {{ translationKey: 'dialog.Yes' }}
onSubmit = { this._onSubmit }
titleKey = 'dialog.grantModeratorTitle'
width = 'small'>
titleKey = 'dialog.grantModeratorTitle'>
<div>
{ this.props.t('dialog.grantModeratorDialog', { participantName: this.props.participantName }) }
</div>

18
react/features/video-menu/components/web/KickRemoteParticipantDialog.js → react/features/video-menu/components/web/KickRemoteParticipantDialog.tsx
View File

@ -1,12 +1,9 @@
// @flow
import React from 'react';
import { Dialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { connect } from '../../../base/redux';
import AbstractKickRemoteParticipantDialog
from '../AbstractKickRemoteParticipantDialog';
import { translate } from '../../../base/i18n/functions';
import { connect } from '../../../base/redux/functions';
import Dialog from '../../../base/ui/components/web/Dialog';
import AbstractKickRemoteParticipantDialog from '../AbstractKickRemoteParticipantDialog';
/**
* Dialog to confirm a remote participant kick action.
@ -21,18 +18,15 @@ class KickRemoteParticipantDialog extends AbstractKickRemoteParticipantDialog {
render() {
return (
<Dialog
okKey = 'dialog.kickParticipantButton'
ok = {{ translationKey: 'dialog.kickParticipantButton' }}
onSubmit = { this._onSubmit }
titleKey = 'dialog.kickParticipantTitle'
width = 'small'>
titleKey = 'dialog.kickParticipantTitle'>
<div>
{ this.props.t('dialog.kickParticipantDialog') }
</div>
</Dialog>
);
}
_onSubmit: () => boolean;
}
export default translate(connect()(KickRemoteParticipantDialog));

16
react/features/video-menu/components/web/MuteRemoteParticipantsVideoDialog.js → react/features/video-menu/components/web/MuteRemoteParticipantsVideoDialog.tsx
View File

@ -1,10 +1,8 @@
/* @flow */
import React from 'react';
import { Dialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { connect } from '../../../base/redux';
import { translate } from '../../../base/i18n/functions';
import { connect } from '../../../base/redux/functions';
import Dialog from '../../../base/ui/components/web/Dialog';
import AbstractMuteRemoteParticipantsVideoDialog, {
abstractMapStateToProps
} from '../AbstractMuteRemoteParticipantsVideoDialog';
@ -25,10 +23,9 @@ class MuteRemoteParticipantsVideoDialog extends AbstractMuteRemoteParticipantsVi
render() {
return (
<Dialog
okKey = 'dialog.muteParticipantsVideoButton'
ok = {{ translationKey: 'dialog.muteParticipantsVideoButton' }}
onSubmit = { this._onSubmit }
titleKey = 'dialog.muteParticipantsVideoTitle'
width = 'small'>
titleKey = 'dialog.muteParticipantsVideoTitle'>
<div>
{this.props.t(this.props.isVideoModerationOn
? 'dialog.muteParticipantsVideoBodyModerationOn'
@ -38,8 +35,7 @@ class MuteRemoteParticipantsVideoDialog extends AbstractMuteRemoteParticipantsVi
</Dialog>
);
}
_onSubmit: () => boolean;
}
// @ts-ignore
export default translate(connect(abstractMapStateToProps)(MuteRemoteParticipantsVideoDialog));

9
react/features/video-quality/components/VideoQualityDialog.web.js
View File

@ -1,6 +1,6 @@
import React, { Component } from 'react';
import { Dialog } from '../../base/dialog';
import Dialog from '../../base/ui/components/web/Dialog';
import VideoQualitySlider from './VideoQualitySlider.web';
@ -20,10 +20,9 @@ export default class VideoQualityDialog extends Component {
render() {
return (
<Dialog
hideCancelButton = { true }
submitDisabled = { true }
titleKey = 'videoStatus.performanceSettings'
width = 'small'>
cancel = {{ hidden: true }}
ok = {{ hidden: true }}
titleKey = 'videoStatus.performanceSettings'>
<VideoQualitySlider />
</Dialog>
);

1
react/features/virtual-background/components/UploadImageButton.tsx
View File

@ -56,7 +56,6 @@ const useStyles = makeStyles()((theme: Theme) => {
fontSize: '14px',
fontWeight: '600',
lineHeight: '20px',
marginLeft: '-10px',
marginTop: theme.spacing(3),
marginBottom: theme.spacing(2),
color: '#669aec',

32
react/features/virtual-background/components/VirtualBackgroundDialog.tsx
View File

@ -10,27 +10,20 @@ import { WithTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../app/types';
// @ts-ignore
import { getMultipleVideoSendingSupportFeatureFlag } from '../../base/config';
// @ts-ignore
import { Dialog, hideDialog } from '../../base/dialog';
import { getMultipleVideoSendingSupportFeatureFlag } from '../../base/config/functions.any';
import { hideDialog } from '../../base/dialog/actions';
import { translate } from '../../base/i18n/functions';
import Icon from '../../base/icons/components/Icon';
import { IconCloseSmall } from '../../base/icons/svg';
// @ts-ignore
import { connect } from '../../base/redux/functions';
// @ts-ignore
import { updateSettings } from '../../base/settings';
import { updateSettings } from '../../base/settings/actions';
// @ts-ignore
import { Tooltip } from '../../base/tooltip';
// @ts-ignore
import { getLocalVideoTrack } from '../../base/tracks';
// @ts-ignore
import { getLocalVideoTrack } from '../../base/tracks/functions';
import Dialog from '../../base/ui/components/web/Dialog';
import { toggleBackgroundEffect } from '../actions';
import { BACKGROUNDS_LIMIT, IMAGES, type Image, VIRTUAL_BACKGROUND_TYPE } from '../constants';
// @ts-ignore
import { toDataURL } from '../functions';
// @ts-ignore
import logger from '../logger';
import UploadImageButton from './UploadImageButton';
@ -121,13 +114,15 @@ const VirtualBackgroundDialog = translate(connect(_mapStateToProps)(VirtualBackg
const useStyles = makeStyles()((theme: Theme) => {
return {
dialogContainer: {
width: 'auto'
},
container: {
display: 'flex',
flexDirection: 'column'
},
dialog: {
alignSelf: 'flex-start',
marginLeft: '-10px',
position: 'relative',
maxHeight: '300px',
color: 'white',
@ -459,12 +454,15 @@ function VirtualBackground({
return (
<Dialog
hideCancelButton = { false }
okKey = { 'virtualBackground.apply' }
className = { classes.dialogContainer }
ok = {{
disabled: !options || loading || !previewIsLoaded,
translationKey: 'virtualBackground.apply'
}}
onCancel = { cancelVirtualBackground }
onSubmit = { applyVirtualBackground }
submitDisabled = { !options || loading || !previewIsLoaded }
titleKey = { 'virtualBackground.title' } >
size = 'large'
titleKey = 'virtualBackground.title' >
<VirtualBackgroundPreview
loadedPreview = { loadedPreviewState }
options = { options } />

1
react/features/virtual-background/components/VirtualBackgroundPreview.tsx
View File

@ -94,7 +94,6 @@ const styles = (theme: Theme) => {
},
'& .video-background-preview-entry': {
marginLeft: '-10px',
height: '250px',
width: '570px',
marginBottom: theme.spacing(2),