From b858496adb807b4687f63e82b5e67d65bece867a Mon Sep 17 00:00:00 2001
From: Robert Pintilii <robert.pin9@gmail.com>
Date: Mon, 10 Oct 2022 12:12:02 +0300
Subject: [PATCH] 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
---
 css/modals/_dialog.scss                       |  4 +
 react/features/base/dialog/middleware.web.ts  | 10 ++-
 .../components/web/DisplayNamePrompt.tsx      |  1 +
 ...Dialog.js => ShareScreenWarningDialog.tsx} | 37 ++++-----
 .../security-dialog/web/SecurityDialog.tsx    | 10 +--
 .../components/web/SharedVideoDialog.tsx      | 14 ++--
 .../components/web/SpeakerStats.tsx           | 16 ++--
 .../components/LanguageSelectorDialog.web.tsx | 17 +++--
 ...ialog.js => AbstractMuteEveryoneDialog.ts} | 75 ++++++++-----------
 ...js => AbstractMuteEveryonesVideoDialog.ts} | 69 +++++++----------
 ...=> AbstractMuteRemoteParticipantDialog.ts} | 16 ++--
 ...tractMuteRemoteParticipantsVideoDialog.ts} | 23 +++---
 .../components/native/MuteEveryoneDialog.js   | 16 ----
 .../native/MuteEveryonesVideoDialog.js        | 16 ----
 .../components/web/MuteEveryoneDialog.tsx     | 36 +--------
 .../web/MuteEveryonesVideoDialog.tsx          | 36 +--------
 16 files changed, 137 insertions(+), 259 deletions(-)
 rename react/features/screen-share/components/{ShareScreenWarningDialog.js => ShareScreenWarningDialog.tsx} (80%)
 rename react/features/video-menu/components/{AbstractMuteEveryoneDialog.js => AbstractMuteEveryoneDialog.ts} (69%)
 rename react/features/video-menu/components/{AbstractMuteEveryonesVideoDialog.js => AbstractMuteEveryonesVideoDialog.ts} (73%)
 rename react/features/video-menu/components/{AbstractMuteRemoteParticipantDialog.js => AbstractMuteRemoteParticipantDialog.ts} (81%)
 rename react/features/video-menu/components/{AbstractMuteRemoteParticipantsVideoDialog.js => AbstractMuteRemoteParticipantsVideoDialog.ts} (81%)

diff --git a/css/modals/_dialog.scss b/css/modals/_dialog.scss
index 9a3a86412..dc1fc2f30 100644
--- a/css/modals/_dialog.scss
+++ b/css/modals/_dialog.scss
@@ -38,3 +38,7 @@
     margin-top: 2px;
     display: block;
 }
+
+.dialog-bottom-margin {
+    margin-bottom: 5px;
+}
diff --git a/react/features/base/dialog/middleware.web.ts b/react/features/base/dialog/middleware.web.ts
index fe9747ce9..1ea7bf202 100644
--- a/react/features/base/dialog/middleware.web.ts
+++ b/react/features/base/dialog/middleware.web.ts
@@ -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);
diff --git a/react/features/display-name/components/web/DisplayNamePrompt.tsx b/react/features/display-name/components/web/DisplayNamePrompt.tsx
index 90b88eba3..971918f81 100644
--- a/react/features/display-name/components/web/DisplayNamePrompt.tsx
+++ b/react/features/display-name/components/web/DisplayNamePrompt.tsx
@@ -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 }
diff --git a/react/features/screen-share/components/ShareScreenWarningDialog.js b/react/features/screen-share/components/ShareScreenWarningDialog.tsx
similarity index 80%
rename from react/features/screen-share/components/ShareScreenWarningDialog.js
rename to react/features/screen-share/components/ShareScreenWarningDialog.tsx
index 86e0d3fb3..5e5969b72 100644
--- a/react/features/screen-share/components/ShareScreenWarningDialog.js
+++ b/react/features/screen-share/components/ShareScreenWarningDialog.tsx
@@ -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>);
-
     }
 }
 
diff --git a/react/features/security/components/security-dialog/web/SecurityDialog.tsx b/react/features/security/components/security-dialog/web/SecurityDialog.tsx
index 7cb41f493..285cf6a6f 100644
--- a/react/features/security/components/security-dialog/web/SecurityDialog.tsx
+++ b/react/features/security/components/security-dialog/web/SecurityDialog.tsx
@@ -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
diff --git a/react/features/shared-video/components/web/SharedVideoDialog.tsx b/react/features/shared-video/components/web/SharedVideoDialog.tsx
index ef768fc36..18329f791 100644
--- a/react/features/shared-video/components/web/SharedVideoDialog.tsx
+++ b/react/features/shared-video/components/web/SharedVideoDialog.tsx
@@ -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'
diff --git a/react/features/speaker-stats/components/web/SpeakerStats.tsx b/react/features/speaker-stats/components/web/SpeakerStats.tsx
index e82f05417..4944aabb4 100644
--- a/react/features/speaker-stats/components/web/SpeakerStats.tsx
+++ b/react/features/speaker-stats/components/web/SpeakerStats.tsx
@@ -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 = {
diff --git a/react/features/subtitles/components/LanguageSelectorDialog.web.tsx b/react/features/subtitles/components/LanguageSelectorDialog.web.tsx
index 6c376aabb..cb8907f10 100644
--- a/react/features/subtitles/components/LanguageSelectorDialog.web.tsx
+++ b/react/features/subtitles/components/LanguageSelectorDialog.web.tsx
@@ -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 }
diff --git a/react/features/video-menu/components/AbstractMuteEveryoneDialog.js b/react/features/video-menu/components/AbstractMuteEveryoneDialog.ts
similarity index 69%
rename from react/features/video-menu/components/AbstractMuteEveryoneDialog.js
rename to react/features/video-menu/components/AbstractMuteEveryoneDialog.ts
index dd501d88f..b6d9cca32 100644
--- a/react/features/video-menu/components/AbstractMuteEveryoneDialog.js
+++ b/react/features/video-menu/components/AbstractMuteEveryoneDialog.ts
@@ -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(', ');
diff --git a/react/features/video-menu/components/AbstractMuteEveryonesVideoDialog.js b/react/features/video-menu/components/AbstractMuteEveryonesVideoDialog.ts
similarity index 73%
rename from react/features/video-menu/components/AbstractMuteEveryonesVideoDialog.js
rename to react/features/video-menu/components/AbstractMuteEveryonesVideoDialog.ts
index d106a83a9..1019617b0 100644
--- a/react/features/video-menu/components/AbstractMuteEveryonesVideoDialog.js
+++ b/react/features/video-menu/components/AbstractMuteEveryonesVideoDialog.ts
@@ -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(', ');
diff --git a/react/features/video-menu/components/AbstractMuteRemoteParticipantDialog.js b/react/features/video-menu/components/AbstractMuteRemoteParticipantDialog.ts
similarity index 81%
rename from react/features/video-menu/components/AbstractMuteRemoteParticipantDialog.js
rename to react/features/video-menu/components/AbstractMuteRemoteParticipantDialog.ts
index 6254e11db..4698547b7 100644
--- a/react/features/video-menu/components/AbstractMuteRemoteParticipantDialog.js
+++ b/react/features/video-menu/components/AbstractMuteRemoteParticipantDialog.ts
@@ -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.
      *
diff --git a/react/features/video-menu/components/AbstractMuteRemoteParticipantsVideoDialog.js b/react/features/video-menu/components/AbstractMuteRemoteParticipantsVideoDialog.ts
similarity index 81%
rename from react/features/video-menu/components/AbstractMuteRemoteParticipantsVideoDialog.js
rename to react/features/video-menu/components/AbstractMuteRemoteParticipantsVideoDialog.ts
index eac67246a..49d1fbcfb 100644
--- a/react/features/video-menu/components/AbstractMuteRemoteParticipantsVideoDialog.js
+++ b/react/features/video-menu/components/AbstractMuteRemoteParticipantsVideoDialog.ts
@@ -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)
     };
diff --git a/react/features/video-menu/components/native/MuteEveryoneDialog.js b/react/features/video-menu/components/native/MuteEveryoneDialog.js
index 64fcf3979..7c8ea748f 100644
--- a/react/features/video-menu/components/native/MuteEveryoneDialog.js
+++ b/react/features/video-menu/components/native/MuteEveryoneDialog.js
@@ -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}.
      *
diff --git a/react/features/video-menu/components/native/MuteEveryonesVideoDialog.js b/react/features/video-menu/components/native/MuteEveryonesVideoDialog.js
index 1d2e37389..695209ad1 100644
--- a/react/features/video-menu/components/native/MuteEveryonesVideoDialog.js
+++ b/react/features/video-menu/components/native/MuteEveryonesVideoDialog.js
@@ -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}.
      *
diff --git a/react/features/video-menu/components/web/MuteEveryoneDialog.tsx b/react/features/video-menu/components/web/MuteEveryoneDialog.tsx
index 6a6448ef6..17cf03810 100644
--- a/react/features/video-menu/components/web/MuteEveryoneDialog.tsx
+++ b/react/features/video-menu/components/web/MuteEveryoneDialog.tsx
@@ -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));
diff --git a/react/features/video-menu/components/web/MuteEveryonesVideoDialog.tsx b/react/features/video-menu/components/web/MuteEveryonesVideoDialog.tsx
index 2f194d511..98860b258 100644
--- a/react/features/video-menu/components/web/MuteEveryonesVideoDialog.tsx
+++ b/react/features/video-menu/components/web/MuteEveryonesVideoDialog.tsx
@@ -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));