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

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

Convert some files to TS
Refactor MuteEveryone and MuteEveryonesVideo dialogs. Move shared code to abstract components. Remove unnecessary code
This commit is contained in:
Robert Pintilii 2022-10-10 12:12:02 +03:00 committed by GitHub
parent 68f79e52e7
commit b858496adb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 137 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/modals/_dialog.scss
View File

@ -38,3 +38,7 @@
margin-top: 2px;
display: block;
}
.dialog-bottom-margin {
margin-bottom: 5px;
}

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

@ -16,6 +16,13 @@ import StartRecordingDialog from '../../recording/components/Recording/web/Start
// @ts-ignore
import StopRecordingDialog from '../../recording/components/Recording/web/StopRecordingDialog';
import ShareAudioDialog from '../../screen-share/components/ShareAudioDialog';
import ShareScreenWarningDialog from '../../screen-share/components/ShareScreenWarningDialog';
import SecurityDialog from '../../security/components/security-dialog/web/SecurityDialog';
import SharedVideoDialog from '../../shared-video/components/web/SharedVideoDialog';
import SpeakerStats from '../../speaker-stats/components/web/SpeakerStats';
import LanguageSelectorDialog from '../../subtitles/components/LanguageSelectorDialog.web';
import MuteEveryoneDialog from '../../video-menu/components/web/MuteEveryoneDialog';
import MuteEveryonesVideoDialog from '../../video-menu/components/web/MuteEveryonesVideoDialog';
import MiddlewareRegistry from '../redux/MiddlewareRegistry';
import { OPEN_DIALOG } from './actionTypes';
@ -25,7 +32,8 @@ import { OPEN_DIALOG } from './actionTypes';
const NEW_DIALOG_LIST = [ KeyboardShortcutsDialog, ChatPrivacyDialog, DisplayNamePrompt, EmbedMeetingDialog,
FeedbackDialog, AddPeopleDialog, PremiumFeatureDialog, StartLiveStreamDialog, StopLiveStreamDialog,
StartRecordingDialog, StopRecordingDialog, ShareAudioDialog ];
StartRecordingDialog, StopRecordingDialog, ShareAudioDialog, ShareScreenWarningDialog, SecurityDialog,
SharedVideoDialog, SpeakerStats, LanguageSelectorDialog, MuteEveryoneDialog, MuteEveryonesVideoDialog ];
// 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);

1
react/features/display-name/components/web/DisplayNamePrompt.tsx
View File

@ -57,6 +57,7 @@ class DisplayNamePrompt extends AbstractDisplayNamePrompt<State> {
titleKey = 'dialog.displayNameRequired'>
<Input
autoFocus = { true }
className = 'dialog-bottom-margin'
label = { this.props.t('dialog.enterDisplayName') }
name = 'displayName'
onChange = { this._onDisplayNameChange }

37
react/features/screen-share/components/ShareScreenWarningDialog.js → react/features/screen-share/components/ShareScreenWarningDialog.tsx
View File

@ -1,29 +1,23 @@
// @flow
import React, { Component } from 'react';
import type { Dispatch } from 'redux';
import { WithTranslation } from 'react-i18next';
import { Dialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
import { connect } from '../../base/redux';
import { toggleScreensharing } from '../../base/tracks';
import { IStore } from '../../app/types';
import { translate } from '../../base/i18n/functions';
import { connect } from '../../base/redux/functions';
import { toggleScreensharing } from '../../base/tracks/actions';
import Dialog from '../../base/ui/components/web/Dialog';
export type Props = {
/**
* The redux {@code dispatch} function.
*/
dispatch: Dispatch<any>,
export interface Props extends WithTranslation {
/**
* Whether or not the dialog was opened for the audio screen sharing flow or the normal one.
*/
_isAudioScreenShareWarning: Boolean,
_isAudioScreenShareWarning: Boolean;
/**
* Invoked to obtain translated strings.
* The redux {@code dispatch} function.
*/
t: Function
dispatch: IStore['dispatch'];
}
/**
@ -36,14 +30,12 @@ class ShareScreenWarningDialog extends Component<Props> {
*
* @inheritdoc
*/
constructor(props) {
constructor(props: Props) {
super(props);
this._onStopSharing = this._onStopSharing.bind(this);
}
_onStopSharing: () => boolean;
/**
* Stop current screen sharing session.
*
@ -86,11 +78,9 @@ class ShareScreenWarningDialog extends Component<Props> {
}
return (<Dialog
hideCancelButton = { false }
okKey = { t(stopSharing) }
ok = {{ translationKey: stopSharing }}
onSubmit = { this._onStopSharing }
titleKey = { t(title) }
width = { 'small' }>
titleKey = { t(title) }>
<div className = 'share-screen-warn-dialog'>
<p className = 'header'> { t(header1) } </p>
<p className = 'description' > { t(description1) } </p>
@ -99,7 +89,6 @@ class ShareScreenWarningDialog extends Component<Props> {
<p className = 'description' > { t(description2) } </p>
</div>
</Dialog>);
}
}

10
react/features/security/components/security-dialog/web/SecurityDialog.tsx
View File

@ -4,10 +4,9 @@ import React, { useEffect, useState } from 'react';
import { IState } from '../../../../app/types';
// @ts-ignore
import { setPassword as setPass } from '../../../../base/conference';
// @ts-ignore
import { Dialog } from '../../../../base/dialog';
import { isLocalParticipantModerator } from '../../../../base/participants/functions';
import { connect } from '../../../../base/redux/functions';
import Dialog from '../../../../base/ui/components/web/Dialog';
// @ts-ignore
import { E2EESection } from '../../../../e2ee/components';
// @ts-ignore
@ -90,10 +89,9 @@ function SecurityDialog({
return (
<Dialog
hideCancelButton = { true }
submitDisabled = { true }
titleKey = 'security.title'
width = { 'small' }>
cancel = {{ hidden: true }}
ok = {{ hidden: true }}
titleKey = 'security.title'>
<div className = 'security-dialog'>
<LobbySection />
<PasswordSection

14
react/features/shared-video/components/web/SharedVideoDialog.tsx
View File

@ -1,9 +1,8 @@
import React from 'react';
// @ts-ignore
import { Dialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n/functions';
import { connect } from '../../../base/redux/functions';
import Dialog from '../../../base/ui/components/web/Dialog';
import Input from '../../../base/ui/components/web/Input';
import AbstractSharedVideoDialog from '../AbstractSharedVideoDialog';
@ -73,14 +72,15 @@ class SharedVideoDialog extends AbstractSharedVideoDialog<any> {
return (
<Dialog
hideCancelButton = { false }
okDisabled = { this.state.okDisabled }
okKey = { t('dialog.Share') }
ok = {{
disabled: this.state.okDisabled,
translationKey: 'dialog.Share'
}}
onSubmit = { this._onSubmitValue }
titleKey = { t('dialog.shareVideoTitle') }
width = { 'small' }>
titleKey = 'dialog.shareVideoTitle'>
<Input
autoFocus = { true }
className = 'dialog-bottom-margin'
error = { error }
label = { t('dialog.videoLink') }
name = 'sharedVideoUrl'

16
react/features/speaker-stats/components/web/SpeakerStats.tsx
View File

@ -5,8 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IState } from '../../../app/types';
// @ts-ignore
import { Dialog } from '../../../base/dialog';
import Dialog from '../../../base/ui/components/web/Dialog';
import { escapeRegexp } from '../../../base/util/helpers';
// @ts-ignore
import { initSearch, resetSearchCriteria, toggleFaceExpressions } from '../../actions';
@ -56,9 +55,6 @@ const useStyles = makeStyles()((theme: Theme) => {
}
}
},
footer: {
display: 'none !important'
},
labelsContainer: {
position: 'relative'
},
@ -115,12 +111,10 @@ const SpeakerStats = () => {
return (
<Dialog
cancelKey = 'dialog.close'
classes = {{ footer: classes.footer }}
hideCancelButton = { true }
submitDisabled = { true }
titleKey = 'speakerStats.speakerStats'
width = { showFaceExpressions ? '664px' : 'small' }>
cancel = {{ hidden: true }}
ok = {{ hidden: true }}
size = { showFaceExpressions ? 'large' : 'medium' }
titleKey = 'speakerStats.speakerStats'>
<div className = { classes.speakerStats }>
<div
className = {

17
react/features/subtitles/components/LanguageSelectorDialog.web.tsx
View File

@ -4,10 +4,9 @@ import { useDispatch } from 'react-redux';
import { IState } from '../../app/types';
// @ts-ignore
import { Dialog } from '../../base/dialog';
// @ts-ignore
import { TRANSLATION_LANGUAGES, TRANSLATION_LANGUAGES_HEAD } from '../../base/i18n';
import { connect } from '../../base/redux/functions';
import Dialog from '../../base/ui/components/web/Dialog';
// @ts-ignore
import { setRequestingSubtitles, toggleLanguageSelectorDialog, updateTranslationLanguage } from '../actions';
@ -25,8 +24,11 @@ interface ILanguageSelectorDialogProps {
*
* @returns {React$Element<any>}
*/
const LanguageSelectorDialog = ({ _language, _translationLanguages, _translationLanguagesHead }:
ILanguageSelectorDialogProps) => {
const LanguageSelectorDialog = ({
_language,
_translationLanguages,
_translationLanguagesHead
}: ILanguageSelectorDialogProps) => {
const dispatch = useDispatch();
const off = 'transcribing.subtitlesOff';
@ -65,10 +67,9 @@ const LanguageSelectorDialog = ({ _language, _translationLanguages, _translation
return (
<Dialog
hideCancelButton = { true }
submitDisabled = { true }
titleKey = 'transcribing.subtitles'
width = { 'small' }>
cancel = {{ hidden: true }}
ok = {{ hidden: true }}
titleKey = 'transcribing.subtitles'>
<LanguageList
items = { listItems }
onLanguageSelected = { onLanguageSelected }

75
react/features/video-menu/components/AbstractMuteEveryoneDialog.js → react/features/video-menu/components/AbstractMuteEveryoneDialog.ts
View File

@ -1,12 +1,12 @@
// @flow
import React from 'react';
import { WithTranslation } from 'react-i18next';
import { IState } from '../../app/types';
import { requestDisableAudioModeration, requestEnableAudioModeration } from '../../av-moderation/actions';
import { isEnabledFromState, isSupported } from '../../av-moderation/functions';
import { Dialog } from '../../base/dialog';
import { MEDIA_TYPE } from '../../base/media';
import { getLocalParticipant, getParticipantDisplayName } from '../../base/participants';
import { MEDIA_TYPE } from '../../base/media/constants';
import { getLocalParticipant, getParticipantDisplayName } from '../../base/participants/functions';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import { muteAllParticipants } from '../actions';
import AbstractMuteRemoteParticipantDialog, {
@ -17,19 +17,18 @@ import AbstractMuteRemoteParticipantDialog, {
* The type of the React {@code Component} props of
* {@link AbstractMuteEveryoneDialog}.
*/
export type Props = AbstractProps & {
content: string,
exclude: Array<string>,
title: string,
showAdvancedModerationToggle: boolean,
isAudioModerationEnabled: boolean,
isModerationSupported: boolean
export type Props = AbstractProps & WithTranslation & {
content: string;
exclude: Array<string>;
isAudioModerationEnabled: boolean;
isModerationSupported: boolean;
showAdvancedModerationToggle: boolean;
title: string;
};
type State = {
audioModerationEnabled: boolean,
content: string
audioModerationEnabled: boolean;
content: string;
};
/**
@ -39,7 +38,7 @@ type State = {
*
* @augments AbstractMuteRemoteParticipantDialog
*/
export default class AbstractMuteEveryoneDialog<P: Props> extends AbstractMuteRemoteParticipantDialog<P, State> {
export default class AbstractMuteEveryoneDialog<P extends Props> extends AbstractMuteRemoteParticipantDialog<P, State> {
static defaultProps = {
exclude: [],
muteLocal: false
@ -67,31 +66,21 @@ export default class AbstractMuteEveryoneDialog<P: Props> extends AbstractMuteRe
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const { content, title } = this.props;
return (
<Dialog
okKey = 'dialog.muteParticipantButton'
onSubmit = { this._onSubmit }
titleString = { title }
width = 'small'>
<div>
{ content }
</div>
</Dialog>
);
* Toggles advanced moderation switch.
*
* @returns {void}
*/
_onToggleModeration() {
this.setState(state => {
return {
audioModerationEnabled: !state.audioModerationEnabled,
content: this.props.t(state.audioModerationEnabled
? 'dialog.muteEveryoneDialog' : 'dialog.muteEveryoneDialogModerationOn'
)
};
});
}
_onSubmit: () => boolean;
_onToggleModeration: () => void;
/**
* Callback to be invoked when the value of this dialog is submitted.
*
@ -117,16 +106,16 @@ export default class AbstractMuteEveryoneDialog<P: Props> extends AbstractMuteRe
/**
* 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) {
const { exclude = [], t } = ownProps;
const whom = exclude
// eslint-disable-next-line no-confusing-arrow
.map(id => id === getLocalParticipant(state).id
.map(id => id === getLocalParticipant(state)?.id
? t('dialog.muteEveryoneSelf')
: getParticipantDisplayName(state, id))
.join(', ');

69
react/features/video-menu/components/AbstractMuteEveryonesVideoDialog.js → react/features/video-menu/components/AbstractMuteEveryonesVideoDialog.ts
View File

@ -1,12 +1,12 @@
// @flow
import React from 'react';
import { WithTranslation } from 'react-i18next';
import { IState } from '../../app/types';
import { requestDisableVideoModeration, requestEnableVideoModeration } from '../../av-moderation/actions';
import { isEnabledFromState, isSupported } from '../../av-moderation/functions';
import { Dialog } from '../../base/dialog';
import { MEDIA_TYPE } from '../../base/media';
import { getLocalParticipant, getParticipantDisplayName } from '../../base/participants';
import { MEDIA_TYPE } from '../../base/media/constants';
import { getLocalParticipant, getParticipantDisplayName } from '../../base/participants/functions';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import { muteAllParticipants } from '../actions';
import AbstractMuteRemoteParticipantsVideoDialog, {
@ -17,19 +17,18 @@ import AbstractMuteRemoteParticipantsVideoDialog, {
* The type of the React {@code Component} props of
* {@link AbstractMuteEveryonesVideoDialog}.
*/
export type Props = AbstractProps & {
content: string,
exclude: Array<string>,
title: string,
showAdvancedModerationToggle: boolean,
isVideoModerationEnabled: boolean,
isModerationSupported: boolean
export type Props = AbstractProps & WithTranslation & {
content: string;
exclude: Array<string>;
isModerationSupported: boolean;
isVideoModerationEnabled: boolean;
showAdvancedModerationToggle: boolean;
title: string;
};
type State = {
moderationEnabled: boolean;
content: string;
moderationEnabled: boolean;
};
/**
@ -39,7 +38,7 @@ type State = {
*
* @augments AbstractMuteRemoteParticipantsVideoDialog
*/
export default class AbstractMuteEveryonesVideoDialog<P: Props>
export default class AbstractMuteEveryonesVideoDialog<P extends Props>
extends AbstractMuteRemoteParticipantsVideoDialog<P, State> {
static defaultProps = {
exclude: [],
@ -68,31 +67,21 @@ export default class AbstractMuteEveryonesVideoDialog<P: Props>
}
/**
* Implements React's {@link Component#render()}.
* Toggles advanced moderation switch.
*
* @inheritdoc
* @returns {ReactElement}
* @returns {void}
*/
render() {
const { content, title } = this.props;
return (
<Dialog
okKey = 'dialog.muteParticipantsVideoButton'
onSubmit = { this._onSubmit }
titleString = { title }
width = 'small'>
<div>
{ content }
</div>
</Dialog>
);
_onToggleModeration() {
this.setState(state => {
return {
moderationEnabled: !state.moderationEnabled,
content: this.props.t(state.moderationEnabled
? 'dialog.muteEveryonesVideoDialog' : 'dialog.muteEveryonesVideoDialogModerationOn'
)
};
});
}
_onSubmit: () => boolean;
_onToggleModeration: () => void;
/**
* Callback to be invoked when the value of this dialog is submitted.
*
@ -118,17 +107,17 @@ export default class AbstractMuteEveryonesVideoDialog<P: Props>
/**
* Maps (parts of) the Redux state to the associated {@code AbstractMuteEveryonesVideoDialog}'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) {
const { exclude = [], t } = ownProps;
const isVideoModerationEnabled = isEnabledFromState(MEDIA_TYPE.VIDEO, state);
const whom = exclude
// eslint-disable-next-line no-confusing-arrow
.map(id => id === getLocalParticipant(state).id
.map(id => id === getLocalParticipant(state)?.id
? t('dialog.muteEveryoneSelf')
: getParticipantDisplayName(state, id))
.join(', ');

16
react/features/video-menu/components/AbstractMuteRemoteParticipantDialog.js → react/features/video-menu/components/AbstractMuteRemoteParticipantDialog.ts
View File

@ -1,8 +1,8 @@
// @flow
import { Component } from 'react';
import { MEDIA_TYPE } from '../../base/media';
import { MEDIA_TYPE } from '../../base/media/constants';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import { muteRemote } from '../actions';
/**
@ -14,17 +14,17 @@ export type Props = {
/**
* The Redux dispatch function.
*/
dispatch: Function,
dispatch: Function;
/**
* The ID of the remote participant to be muted.
*/
participantID: string,
participantID: string;
/**
* Function to translate i18n labels.
*/
t: Function
t: Function;
};
/**
@ -32,7 +32,7 @@ export type Props = {
*
* @augments Component
*/
export default class AbstractMuteRemoteParticipantDialog<P:Props = Props, State=void>
export default class AbstractMuteRemoteParticipantDialog<P extends Props = Props, State=void>
extends Component<P, State> {
/**
* Initializes a new {@code AbstractMuteRemoteParticipantDialog} instance.
@ -47,8 +47,6 @@ export default class AbstractMuteRemoteParticipantDialog<P:Props = Props, State=
this._onSubmit = this._onSubmit.bind(this);
}
_onSubmit: () => boolean;
/**
* Handles the submit button action.
*

23
react/features/video-menu/components/AbstractMuteRemoteParticipantsVideoDialog.js → react/features/video-menu/components/AbstractMuteRemoteParticipantsVideoDialog.ts
View File

@ -1,10 +1,11 @@
// @flow
import { Component } from 'react';
import { IState } from '../../app/types';
import { rejectParticipantVideo } from '../../av-moderation/actions';
import { isEnabledFromState } from '../../av-moderation/functions';
import { MEDIA_TYPE } from '../../base/media';
import { MEDIA_TYPE } from '../../base/media/constants';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import { muteRemote } from '../actions';
/**
@ -16,22 +17,22 @@ export type Props = {
/**
* The Redux dispatch function.
*/
dispatch: Function,
dispatch: Function;
/**
* Whether or not video moderation is on.
*/
isVideoModerationOn: boolean,
isVideoModerationOn: boolean;
/**
* The ID of the remote participant to be muted.
*/
participantID: string,
participantID: string;
/**
* Function to translate i18n labels.
*/
t: Function
t: Function;
};
/**
@ -39,7 +40,7 @@ export type Props = {
*
* @augments Component
*/
export default class AbstractMuteRemoteParticipantsVideoDialog<P:Props = Props, State=void>
export default class AbstractMuteRemoteParticipantsVideoDialog<P extends Props = Props, State=void>
extends Component<P, State> {
/**
* Initializes a new {@code AbstractMuteRemoteParticipantsVideoDialog} instance.
@ -54,8 +55,6 @@ export default class AbstractMuteRemoteParticipantsVideoDialog<P:Props = Props,
this._onSubmit = this._onSubmit.bind(this);
}
_onSubmit: () => boolean;
/**
* Handles the submit button action.
*
@ -76,11 +75,11 @@ export default class AbstractMuteRemoteParticipantsVideoDialog<P:Props = Props,
* Maps (parts of) the redux state to the associated
* {@code AbstractDialogContainer}'s props.
*
* @param {Object} state - The redux state.
* @param {IState} state - The redux state.
* @private
* @returns {Object}
*/
export function abstractMapStateToProps(state: Object) {
export function abstractMapStateToProps(state: IState) {
return {
isVideoModerationOn: isEnabledFromState(MEDIA_TYPE.VIDEO, state)
};

16
react/features/video-menu/components/native/MuteEveryoneDialog.js
View File

@ -34,22 +34,6 @@ class MuteEveryoneDialog extends AbstractMuteEveryoneDialog<Props> {
);
}
/**
* Toggles advanced moderation switch.
*
* @returns {void}
*/
_onToggleModeration() {
this.setState(state => {
return {
audioModerationEnabled: !state.audioModerationEnabled,
content: this.props.t(state.audioModerationEnabled
? 'dialog.muteEveryoneDialog' : 'dialog.muteEveryoneDialogModerationOn'
)
};
});
}
/**
* Implements {@code Component#render}.
*

16
react/features/video-menu/components/native/MuteEveryonesVideoDialog.js
View File

@ -34,22 +34,6 @@ class MuteEveryonesVideoDialog extends AbstractMuteEveryonesVideoDialog<Props> {
);
}
/**
* Toggles advanced moderation switch.
*
* @returns {void}
*/
_onToggleModeration() {
this.setState(state => {
return {
moderationEnabled: !state.moderationEnabled,
content: this.props.t(state.moderationEnabled
? 'dialog.muteEveryonesVideoDialog' : 'dialog.muteEveryonesVideoDialogModerationOn'
)
};
});
}
/**
* Implements {@code Component#render}.
*

36
react/features/video-menu/components/web/MuteEveryoneDialog.tsx
View File

@ -1,13 +1,10 @@
/* eslint-disable lines-around-comment */
import React from 'react';
// @ts-ignore
import { Dialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n/functions';
import { connect } from '../../../base/redux/functions';
import Dialog from '../../../base/ui/components/web/Dialog';
import Switch from '../../../base/ui/components/web/Switch';
import AbstractMuteEveryoneDialog, { type Props, abstractMapStateToProps }
// @ts-ignore
from '../AbstractMuteEveryoneDialog';
/**
@ -18,24 +15,6 @@ import AbstractMuteEveryoneDialog, { type Props, abstractMapStateToProps }
*/
class MuteEveryoneDialog extends AbstractMuteEveryoneDialog<Props> {
/**
* Toggles advanced moderation switch.
*
* @returns {void}
*/
_onToggleModeration() {
// @ts-ignore
this.setState(state => {
return {
audioModerationEnabled: !state.audioModerationEnabled,
// @ts-ignore
content: this.props.t(state.audioModerationEnabled
? 'dialog.muteEveryoneDialog' : 'dialog.muteEveryoneDialogModerationOn'
)
};
});
}
/**
* Implements React's {@link Component#render()}.
*
@ -45,25 +24,19 @@ class MuteEveryoneDialog extends AbstractMuteEveryoneDialog<Props> {
render() {
return (
<Dialog
okKey = 'dialog.muteParticipantButton'
ok = {{ translationKey: 'dialog.muteParticipantButton' }}
onSubmit = { this._onSubmit }
// @ts-ignore
titleString = { this.props.title }
width = 'small'>
title = { this.props.title }>
<div className = 'mute-dialog'>
{/* @ts-ignore */}
{ this.state.content }
{/* @ts-ignore */}
{ this.props.isModerationSupported && this.props.exclude.length === 0 && (
<>
<div className = 'separator-line' />
<div className = 'control-row'>
<label htmlFor = 'moderation-switch'>
{/* @ts-ignore */}
{this.props.t('dialog.moderationAudioLabel')}
</label>
<Switch
// @ts-ignore
checked = { !this.state.audioModerationEnabled }
id = 'moderation-switch'
onChange = { this._onToggleModeration } />
@ -74,9 +47,6 @@ class MuteEveryoneDialog extends AbstractMuteEveryoneDialog<Props> {
</Dialog>
);
}
_onSubmit: () => boolean;
}
// @ts-ignore
export default translate(connect(abstractMapStateToProps)(MuteEveryoneDialog));

36
react/features/video-menu/components/web/MuteEveryonesVideoDialog.tsx
View File

@ -1,13 +1,10 @@
/* eslint-disable lines-around-comment */
import React from 'react';
// @ts-ignore
import { Dialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n/functions';
import { connect } from '../../../base/redux/functions';
import Dialog from '../../../base/ui/components/web/Dialog';
import Switch from '../../../base/ui/components/web/Switch';
import AbstractMuteEveryonesVideoDialog, { type Props, abstractMapStateToProps }
// @ts-ignore
from '../AbstractMuteEveryonesVideoDialog';
/**
@ -18,24 +15,6 @@ import AbstractMuteEveryonesVideoDialog, { type Props, abstractMapStateToProps }
*/
class MuteEveryonesVideoDialog extends AbstractMuteEveryonesVideoDialog<Props> {
/**
* Toggles advanced moderation switch.
*
* @returns {void}
*/
_onToggleModeration() {
// @ts-ignore
this.setState(state => {
return {
moderationEnabled: !state.moderationEnabled,
// @ts-ignore
content: this.props.t(state.moderationEnabled
? 'dialog.muteEveryonesVideoDialog' : 'dialog.muteEveryonesVideoDialogModerationOn'
)
};
});
}
/**
* Implements React's {@link Component#render()}.
*
@ -45,25 +24,19 @@ class MuteEveryonesVideoDialog extends AbstractMuteEveryonesVideoDialog<Props> {
render() {
return (
<Dialog
okKey = 'dialog.muteParticipantsVideoButton'
ok = {{ translationKey: 'dialog.muteParticipantsVideoButton' }}
onSubmit = { this._onSubmit }
// @ts-ignore
titleString = { this.props.title }
width = 'small'>
title = { this.props.title }>
<div className = 'mute-dialog'>
{/* @ts-ignore */}
{this.state.content}
{/* @ts-ignore */}
{ this.props.isModerationSupported && this.props.exclude.length === 0 && (
<>
<div className = 'separator-line' />
<div className = 'control-row'>
<label htmlFor = 'moderation-switch'>
{/* @ts-ignore */}
{this.props.t('dialog.moderationVideoLabel')}
</label>
<Switch
// @ts-ignore
checked = { !this.state.moderationEnabled }
id = 'moderation-switch'
onChange = { this._onToggleModeration } />
@ -74,9 +47,6 @@ class MuteEveryonesVideoDialog extends AbstractMuteEveryonesVideoDialog<Props> {
</Dialog>
);
}
_onSubmit: () => boolean;
}
// @ts-ignore
export default translate(connect(abstractMapStateToProps)(MuteEveryonesVideoDialog));