ref(TS ) Improve TS (#12491)

Remove global variables from files
Change type to interface

globals.d.ts

@@ -9,6 +9,11 @@ declare global {
         UI: any;
         API: any;
         conference: any;
+        debugLogs: any;
+        keyboardshortcut: {
+            registerShortcut: Function;
+            unregisterShortcut: Function;
+        }
     };
     const interfaceConfig: any;
 

react/features/authentication/components/web/LoginDialog.tsx

@@ -68,7 +68,7 @@ interface IProps extends WithTranslation {
 /**
  * The type of the React {@code Component} state of {@link LoginDialog}.
  */
-type State = {
+interface IState {
 
     /**
      * Authentication process starts before joining the conference room.
@@ -84,14 +84,14 @@ type State = {
      * The user entered local participant name.
      */
     username: string;
-};
+}
 
 /**
  * Component that renders the login in conference dialog.
  *
  *  @returns {React$Element<any>}
  */
-class LoginDialog extends Component<IProps, State> {
+class LoginDialog extends Component<IProps, IState> {
     /**
      * Initializes a new {@code LoginDialog} instance.
      *

react/features/base/audio-only/actions.ts

@@ -8,8 +8,6 @@ import { SET_AUDIO_ONLY } from './actionTypes';
 import logger from './logger';
 
 
-declare let APP: any;
-
 /**
  * Sets the audio-only flag for the current JitsiConference.
  *

react/features/base/avatar/components/AbstractStatelessAvatar.tsx

@@ -1,6 +1,6 @@
 import { PureComponent } from 'react';
 
-export type Props = {
+export interface IProps {
 
     /**
      * Color of the (initials based) avatar, if needed.
@@ -31,13 +31,13 @@ export type Props = {
      * The URL of the avatar to render.
      */
     url?: string | Function;
-};
+}
 
 /**
  * Implements an abstract stateless avatar component that renders an avatar purely from what gets passed through
  * props.
  */
-export default class AbstractStatelessAvatar<P extends Props> extends PureComponent<P> {
+export default class AbstractStatelessAvatar<P extends IProps> extends PureComponent<P> {
     /**
      * Checks if the passed prop is a loaded icon or not.
      *

react/features/base/avatar/components/native/StatelessAvatar.js

@@ -5,7 +5,7 @@ import { Image, Text, View } from 'react-native';
 
 import { Icon } from '../../../icons';
 import { type StyleType } from '../../../styles';
-import AbstractStatelessAvatar, { type Props as AbstractProps } from '../AbstractStatelessAvatar';
+import AbstractStatelessAvatar, { type IProps as AbstractProps } from '../AbstractStatelessAvatar';
 
 import styles from './styles';
 

react/features/base/avatar/components/web/StatelessAvatar.tsx

@@ -3,10 +3,10 @@ import clsx from 'clsx';
 import React from 'react';
 
 import Icon from '../../../icons/components/Icon';
-import AbstractStatelessAvatar, { type Props as AbstractProps } from '../AbstractStatelessAvatar';
+import AbstractStatelessAvatar, { type IProps as AbstractProps } from '../AbstractStatelessAvatar';
 import { PRESENCE_AVAILABLE_COLOR, PRESENCE_AWAY_COLOR, PRESENCE_BUSY_COLOR, PRESENCE_IDLE_COLOR } from '../styles';
 
-type Props = AbstractProps & {
+interface IProps extends AbstractProps {
 
     /**
      * External class name passed through props.
@@ -42,7 +42,7 @@ type Props = AbstractProps & {
      * Indicates whether to load the avatar using CORS or not.
      */
     useCORS?: boolean;
-};
+}
 
 /**
  * Creates the styles for the component.
@@ -115,14 +115,14 @@ const styles = () => {
  * Implements a stateless avatar component that renders an avatar purely from what gets passed through
  * props.
  */
-class StatelessAvatar extends AbstractStatelessAvatar<Props> {
+class StatelessAvatar extends AbstractStatelessAvatar<IProps> {
 
     /**
      * Instantiates a new {@code Component}.
      *
      * @inheritdoc
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this._onAvatarLoadError = this._onAvatarLoadError.bind(this);

react/features/base/components/participants-pane-list/ListItem.tsx

@@ -7,7 +7,7 @@ import { isMobileBrowser } from '../../environment/utils';
 import { withPixelLineHeight } from '../../styles/functions.web';
 import participantsPaneTheme from '../themes/participantsPaneTheme.json';
 
-type Props = {
+interface IProps {
 
     /**
      * List item actions.
@@ -74,7 +74,7 @@ type Props = {
      */
     trigger: string;
 
-};
+}
 
 const useStyles = makeStyles()((theme: Theme) => {
     return {
@@ -188,7 +188,7 @@ const ListItem = ({
     testId,
     textChildren,
     trigger
-}: Props) => {
+}: IProps) => {
     const { classes: styles, cx } = useStyles();
     const _isMobile = isMobileBrowser();
     let timeoutHandler: number;

react/features/base/config/reducer.ts

@@ -14,8 +14,6 @@ import {
 import { IConfig } from './configType';
 import { _cleanupConfig } from './functions';
 
-declare let interfaceConfig: any;
-
 /**
  * The initial state of the feature base/config when executing in a
  * non-React Native environment. The mandatory configuration to be passed to

react/features/base/dialog/components/web/AbstractDialogTab.ts

@@ -3,7 +3,7 @@ import { Component } from 'react';
 /**
  * The type of the React {@code Component} props of {@link AbstractDialogTab}.
  */
-export type Props = {
+export interface IProps {
 
     /**
      * Function that closes the dialog.
@@ -19,7 +19,7 @@ export type Props = {
      * The id of the tab.
      */
     tabId: number;
-};
+}
 
 
 /**
@@ -27,7 +27,7 @@ export type Props = {
  *
  * @augments Component
  */
-class AbstractDialogTab<P extends Props, S> extends Component<P, S> {
+class AbstractDialogTab<P extends IProps, S> extends Component<P, S> {
     /**
      * Initializes a new {@code AbstractDialogTab} instance.
      *

react/features/base/environment/environment.ts

@@ -25,8 +25,6 @@ const browserNameToCheck = {
     safari: browser.isSafari.bind(browser)
 };
 
-declare let interfaceConfig: any;
-
 /**
  * Returns whether or not jitsi is optimized and targeted for the  provided
  * browser name.

react/features/base/i18n/i18next.ts

@@ -1,5 +1,3 @@
-declare let APP: any;
-
 import COUNTRIES_RESOURCES from 'i18n-iso-countries/langs/en.json';
 import i18next from 'i18next';
 import I18nextXHRBackend from 'i18next-xhr-backend';

react/features/base/i18n/languageDetector.web.ts

@@ -3,8 +3,6 @@ import BrowserLanguageDetector from 'i18next-browser-languagedetector';
 import configLanguageDetector from './configLanguageDetector';
 import customNavigatorDetector from './customNavigatorDetector';
 
-declare let interfaceConfig: any;
-
 /**
  * The ordered list (by name) of language detectors to be utilized as backends
  * by the singleton language detector for Web.

react/features/base/icons/components/Icon.tsx

@@ -6,7 +6,7 @@ import { Container } from '../../react/base';
 // @ts-ignore
 import { styleTypeToObject } from '../../styles';
 
-type Props = {
+interface IProps {
 
     /**
      * The id of the element this button icon controls.
@@ -102,7 +102,7 @@ type Props = {
      * TabIndex  for the Icon.
      */
     tabIndex?: number;
-};
+}
 
 export const DEFAULT_COLOR = navigator.product === 'ReactNative' ? 'white' : undefined;
 export const DEFAULT_SIZE = navigator.product === 'ReactNative' ? 36 : 22;
@@ -110,10 +110,10 @@ export const DEFAULT_SIZE = navigator.product === 'ReactNative' ? 36 : 22;
 /**
  * Implements an Icon component that takes a loaded SVG file as prop and renders it as an icon.
  *
- * @param {Props} props - The props of the component.
+ * @param {IProps} props - The props of the component.
  * @returns {ReactElement}
  */
-export default function Icon(props: Props) {
+export default function Icon(props: IProps) {
     const {
         className,
         color,
@@ -135,7 +135,7 @@ export default function Icon(props: Props) {
         onKeyPress,
         onKeyDown,
         ...rest
-    }: Props = props;
+    }: IProps = props;
 
     const {
         color: styleColor,

react/features/base/label/components/AbstractLabel.tsx

@@ -1,21 +0,0 @@
-import { Component } from 'react';
-
-export type Props = {
-
-    /**
-     * An SVG icon to be rendered as the content of the label.
-     */
-    icon?: Function;
-
-    /**
-     * String or component that will be rendered as the label itself.
-     */
-    text?: string;
-};
-
-/**
- * Abstract class for the {@code Label} component.
- */
-export default class Label<P extends Props, S>
-    extends Component<P, S> {
-}

react/features/base/label/components/native/Label.js

@@ -1,12 +1,9 @@
 // @flow
-import React from 'react';
+import React, { Component } from 'react';
 import { Animated, Text } from 'react-native';
 
 import Icon from '../../../icons/components/Icon';
 import { type StyleType, combineStyles } from '../../../styles';
-import AbstractLabel, {
-    type Props as AbstractProps
-} from '../AbstractLabel';
 
 import styles from './styles';
 
@@ -20,7 +17,12 @@ const STATUS_IN_PROGRESS = 'in_progress';
  */
 const STATUS_OFF = 'off';
 
-type Props = AbstractProps & {
+type Props = {
+
+    /**
+     * An SVG icon to be rendered as the content of the label.
+     */
+    icon?: Function,
 
     /**
      * Color for the icon.
@@ -39,10 +41,16 @@ type Props = AbstractProps & {
      */
     style?: ?StyleType,
 
+    /**
+     * String or component that will be rendered as the label itself.
+     */
+    text?: string,
+
     /**
      * Custom styles for the text.
      */
     textStyle?: ?StyleType
+
 };
 
 type State = {
@@ -58,7 +66,7 @@ type State = {
  * Renders a circular indicator to be used for status icons, such as recording
  * on, audio-only conference, video quality and similar.
  */
-export default class Label extends AbstractLabel<Props, State> {
+export default class Label extends Component<Props, State> {
     /**
      * A reference to the started animation of this label.
      */

react/features/base/logging/ExternalApiLogTransport.ts

@@ -1,5 +1,3 @@
-declare let APP: any;
-
 /**
  * Constructs a log transport object for use with external API.
  *

react/features/base/logging/middleware.ts

@@ -19,8 +19,6 @@ import JitsiMeetLogStorage from './JitsiMeetLogStorage';
 import { SET_LOGGING_CONFIG } from './actionTypes';
 import { setLogCollector, setLoggingConfig } from './actions';
 
-declare let APP: any;
-
 /**
  * The Redux middleware of the feature base/logging.
  *

react/features/base/media/subscriber.ts

@@ -1,9 +1,6 @@
 import { IReduxState, IStore } from '../../app/types';
 import StateListenerRegistry from '../redux/StateListenerRegistry';
 
-
-declare let APP: any;
-
 /**
  * Notifies when the local audio mute state changes.
  */

react/features/base/popover/components/Popover.web.tsx

@@ -11,7 +11,7 @@ import { getContextMenuStyle } from '../functions.web';
 /**
  * The type of the React {@code Component} props of {@link Popover}.
  */
-type Props = {
+interface IProps {
 
     /**
      * A child React Element to use as the trigger for showing the dialog.
@@ -69,12 +69,12 @@ type Props = {
      * Whether the popover is visible or not.
      */
     visible: boolean;
-};
+}
 
 /**
  * The type of the React {@code Component} state of {@link Popover}.
  */
-type State = {
+interface IState {
 
     /**
      * The style to apply to the context menu in order to position it correctly.
@@ -85,7 +85,7 @@ type State = {
         position: string;
         top?: string;
     } | null;
-};
+}
 
 /**
  * Implements a React {@code Component} for showing an {@code Popover} on
@@ -93,7 +93,7 @@ type State = {
  *
  * @augments Component
  */
-class Popover extends Component<Props, State> {
+class Popover extends Component<IProps, IState> {
     /**
      * Default values for {@code Popover} component's properties.
      *
@@ -118,7 +118,7 @@ class Popover extends Component<Props, State> {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
@@ -409,7 +409,7 @@ class Popover extends Component<Props, State> {
  * @param {Object} state - The Redux state.
  * @param {Object} ownProps - The own props of the component.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
 function _mapStateToProps(state: IReduxState) {
     return {

react/features/base/premeeting/components/web/ActionButton.tsx

@@ -6,7 +6,7 @@ import Icon from '../../../icons/components/Icon';
 import { IconArrowDown } from '../../../icons/svg';
 import { withPixelLineHeight } from '../../../styles/functions.web';
 
-type Props = {
+interface IProps {
 
     /**
      * Icon to display in the options section.
@@ -78,7 +78,7 @@ type Props = {
      * The type of th button: primary, secondary, text.
      */
     type: string;
-};
+}
 
 const useStyles = makeStyles()((theme: Theme) => {
     return {
@@ -183,7 +183,7 @@ function ActionButton({
     ariaPressed,
     ariaLabel,
     ariaDropDownLabel
-}: Props) {
+}: IProps) {
     const { classes, cx } = useStyles();
 
     const onKeyPressHandler = useCallback(e => {

react/features/base/tracks/actions.web.ts

@@ -38,8 +38,6 @@ import { IShareOptions, IToggleScreenSharingOptions } from './types';
 
 export * from './actions.any';
 
-declare const APP: any;
-
 /**
  * Signals that the local participant is ending screensharing or beginning the screensharing flow.
  *

react/features/base/ui/components/JitsiThemeProvider.web.tsx

@@ -6,7 +6,7 @@ import { IReduxState } from '../../../app/types';
 
 import BaseTheme from './BaseTheme.web';
 
-type Props = {
+interface IProps {
 
     /**
      * The default theme or theme set through advanced branding.
@@ -17,7 +17,7 @@ type Props = {
     * The children of the component.
     */
     children: React.ReactNode;
-};
+}
 
 /**
  * The theme provider for the web app.
@@ -25,7 +25,7 @@ type Props = {
  * @param {Object} props - The props of the component.
  * @returns {React.ReactNode}
  */
-function JitsiThemeProvider(props: Props) {
+function JitsiThemeProvider(props: IProps) {
     return (
         <StyledEngineProvider injectFirst = { true }>
             <ThemeProvider theme = { props._theme }>{ props.children }</ThemeProvider>
@@ -37,7 +37,7 @@ function JitsiThemeProvider(props: Props) {
  * Maps part of the Redux state to the props of this component.
  *
  * @param {Object} state - The Redux state.
- * @returns {Props}
+ * @returns {IProps}
  */
 function _mapStateToProps(state: IReduxState) {
     const { muiBrandedTheme } = state['features/dynamic-branding'];

react/features/base/ui/components/web/ContextMenu.tsx

@@ -34,7 +34,7 @@ const getComputedOuterHeight = (element: HTMLElement) => {
         + getFloatStyleProperty(computedStyle, 'margin-bottom');
 };
 
-type Props = {
+interface IProps {
 
     /**
      * Accessibility label for menu container.
@@ -100,7 +100,7 @@ type Props = {
      * Callback for the mouse leaving the component.
      */
     onMouseLeave?: (e?: React.MouseEvent) => void;
-};
+}
 
 const MAX_HEIGHT = 400;
 
@@ -156,7 +156,7 @@ const ContextMenu = ({
     onDrawerClose,
     onMouseEnter,
     onMouseLeave
-}: Props) => {
+}: IProps) => {
     const [ isHidden, setIsHidden ] = useState(true);
     const containerRef = useRef<HTMLDivElement | null>(null);
     const { classes: styles, cx } = useStyles();

react/features/base/ui/components/web/ContextMenuItem.tsx

@@ -7,7 +7,7 @@ import { showOverflowDrawer } from '../../../../toolbox/functions.web';
 import Icon from '../../../icons/components/Icon';
 import { withPixelLineHeight } from '../../../styles/functions.web';
 
-export type Props = {
+export interface IProps {
 
     /**
      * Label used for accessibility.
@@ -69,7 +69,7 @@ export type Props = {
      * Class name for the text.
      */
     textClassName?: string;
-};
+}
 
 const useStyles = makeStyles()((theme: Theme) => {
     return {
@@ -131,7 +131,7 @@ const ContextMenuItem = ({
     onKeyPress,
     testId,
     text,
-    textClassName }: Props) => {
+    textClassName }: IProps) => {
     const { classes: styles, cx } = useStyles();
     const _overflowDrawer: boolean = useSelector(showOverflowDrawer);
 

react/features/base/ui/components/web/ContextMenuItemGroup.tsx

@@ -2,10 +2,10 @@ import { Theme } from '@mui/material';
 import React, { ReactNode } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import ContextMenuItem, { Props as ItemProps } from './ContextMenuItem';
+import ContextMenuItem, { IProps as ItemProps } from './ContextMenuItem';
 
 
-type Props = {
+interface IProps {
 
     /**
      * List of actions in this group.
@@ -16,7 +16,7 @@ type Props = {
      * The children of the component.
      */
     children?: ReactNode;
-};
+}
 
 const useStyles = makeStyles()((theme: Theme) => {
     return {
@@ -43,7 +43,7 @@ const useStyles = makeStyles()((theme: Theme) => {
 const ContextMenuItemGroup = ({
     actions,
     children
-}: Props) => {
+}: IProps) => {
     const { classes: styles } = useStyles();
 
     return (

react/features/base/util/loadScript.web.ts

@@ -1,5 +1,3 @@
-declare let JitsiMeetJS: any;
-
 /**
  * Loads a script from a specific URL. The script will be interpreted upon load.
  *

react/features/breakout-rooms/actions.ts

@@ -32,8 +32,6 @@ import {
 } from './functions';
 import logger from './logger';
 
-declare let APP: any;
-
 /**
  * Action to create a breakout room.
  *

react/features/breakout-rooms/middleware.ts

@@ -10,8 +10,6 @@ import { moveToRoom } from './actions';
 import logger from './logger';
 import { IRooms } from './types';
 
-declare const APP: any;
-
 /**
  * Registers a change handler for state['features/base/conference'].conference to
  * set the event listeners needed for the breakout rooms feature to operate.

react/features/chat/components/web/ChatInput.tsx

@@ -37,7 +37,7 @@ interface IProps extends WithTranslation {
 /**
  * The type of the React {@code Component} state of {@link ChatInput}.
  */
-type State = {
+interface IState {
 
     /**
      * User provided nickname when the input text is provided in the view.
@@ -48,14 +48,14 @@ type State = {
      * Whether or not the smiley selector is visible.
      */
     showSmileysPanel: boolean;
-};
+}
 
 /**
  * Implements a React Component for drafting and submitting a chat message.
  *
  * @augments Component
  */
-class ChatInput extends Component<IProps, State> {
+class ChatInput extends Component<IProps, IState> {
     _textArea?: RefObject<HTMLTextAreaElement>;
 
     state = {

react/features/chat/components/web/DisplayNameForm.tsx

@@ -30,20 +30,20 @@ interface IProps extends WithTranslation {
 /**
  * The type of the React {@code Component} state of {@DisplayNameForm}.
  */
-type State = {
+interface IState {
 
     /**
      * User provided display name when the input text is provided in the view.
      */
     displayName: string;
-};
+}
 
 /**
  * React Component for requesting the local participant to set a display name.
  *
  * @augments Component
  */
-class DisplayNameForm extends Component<IProps, State> {
+class DisplayNameForm extends Component<IProps, IState> {
     state = {
         displayName: ''
     };

react/features/chat/components/web/GifMessage.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-type Props = {
+interface IProps {
 
     /**
      * URL of the GIF.
      */
     url: string;
-};
+}
 
 const useStyles = makeStyles()(() => {
     return {
@@ -27,7 +27,7 @@ const useStyles = makeStyles()(() => {
     };
 });
 
-const GifMessage = ({ url }: Props) => {
+const GifMessage = ({ url }: IProps) => {
     const { classes: styles } = useStyles();
 
     return (<div className = { styles.container }>

react/features/chat/components/web/TouchmoveHack.tsx

@@ -3,7 +3,7 @@ import { makeStyles } from 'tss-react/mui';
 
 import { isMobileBrowser } from '../../../base/environment/utils';
 
-type Props = {
+interface IProps {
 
     /**
      * The component(s) that need to be scrollable on mobile.
@@ -20,7 +20,7 @@ type Props = {
      */
     isModal: boolean;
 
-};
+}
 
 const useStyles = makeStyles()(() => {
     return {
@@ -40,7 +40,7 @@ const useStyles = makeStyles()(() => {
  *
  * @returns {ReactElement}
  */
-function TouchmoveHack({ children, isModal, flex }: Props) {
+function TouchmoveHack({ children, isModal, flex }: IProps) {
     if (!isModal || !isMobileBrowser()) {
         return children;
     }

react/features/conference/components/native/carmode/TitleBar.tsx

@@ -21,7 +21,7 @@ import { VideoQualityLabel } from '../../../../video-quality';
 import styles from './styles';
 
 
-type Props = {
+interface IProps {
 
     /**
      * Name of the meeting we're currently in.
@@ -33,16 +33,16 @@ type Props = {
      */
     _meetingNameEnabled: boolean;
 
-};
+}
 
 /**
  * Implements a navigation bar component that is rendered on top of the
  * carmode screen.
  *
- * @param {Props} props - The React props passed to this component.
+ * @param {IProps} props - The React props passed to this component.
  * @returns {JSX.Element}
  */
-const TitleBar = (props: Props): JSX.Element => {
+const TitleBar = (props: IProps): JSX.Element => {
     const localParticipant = useSelector(getLocalParticipant);
     const localParticipantId = localParticipant?.id;
 
@@ -83,7 +83,7 @@ const TitleBar = (props: Props): JSX.Element => {
  * Maps part of the Redux store to the props of this component.
  *
  * @param {Object} state - The Redux state.
- * @returns {Props}
+ * @returns {IProps}
  */
 function _mapStateToProps(state: IReduxState) {
     const { hideConferenceSubject } = state['features/base/config'];

react/features/connection-indicator/components/web/ConnectionIndicator.tsx

@@ -146,13 +146,13 @@ type Props = AbstractProps & WithTranslation & {
     statsPopoverPosition: string;
 };
 
-type State = AbstractState & {
+interface IState extends AbstractState {
 
     /**
      * Whether popover is ivisible or not.
      */
     popoverVisible: boolean;
-};
+}
 
 const styles = (theme: Theme) => {
     return {
@@ -206,7 +206,7 @@ const styles = (theme: Theme) => {
  *
  * @augments {Component}
  */
-class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
+class ConnectionIndicator extends AbstractConnectionIndicator<Props, IState> {
     /**
      * Initializes a new {@code ConnectionIndicator} instance.
      *

react/features/desktop-picker/components/DesktopPicker.tsx

@@ -70,7 +70,7 @@ interface IProps extends WithTranslation {
 /**
  * The type of the React {@code Component} state of {@link DesktopPicker}.
  */
-type State = {
+interface IState {
 
     /**
      * The state of the audio screen share checkbox.
@@ -96,7 +96,7 @@ type State = {
      * The desktop source types to fetch previews for.
      */
     types: Array<string>;
-};
+}
 
 
 /**
@@ -104,7 +104,7 @@ type State = {
  *
  * @augments Component
  */
-class DesktopPicker extends PureComponent<IProps, State> {
+class DesktopPicker extends PureComponent<IProps, IState> {
     /**
      * Implements React's {@link Component#getDerivedStateFromProps()}.
      *
@@ -130,7 +130,7 @@ class DesktopPicker extends PureComponent<IProps, State> {
 
     _poller: any = null;
 
-    state: State = {
+    state: IState = {
         screenShareAudio: false,
         selectedSource: {},
         selectedTab: 0,

react/features/display-name/components/native/DisplayNameLabel.tsx

@@ -12,7 +12,7 @@ import { connect } from '../../../base/redux/functions';
 // @ts-ignore
 import styles from './styles';
 
-type Props = {
+interface IProps {
 
     /**
      * The name of the participant to render.
@@ -33,12 +33,12 @@ type Props = {
      * The ID of the participant to render the label for.
      */
     participantId: string;
-};
+}
 
 /**
  * Renders a label with the display name of the on-stage participant.
  */
-class DisplayNameLabel extends React.Component<Props> {
+class DisplayNameLabel extends React.Component<IProps> {
     /**
      * Implements {@code Component#render}.
      *
@@ -65,10 +65,10 @@ class DisplayNameLabel extends React.Component<Props> {
  * Maps part of the Redux state to the props of this component.
  *
  * @param {any} state - The Redux state.
- * @param {Props} ownProps - The own props of the component.
- * @returns {Props}
+ * @param {IProps} ownProps - The own props of the component.
+ * @returns {IProps}
  */
-function _mapStateToProps(state: IReduxState, ownProps: Partial<Props>) {
+function _mapStateToProps(state: IReduxState, ownProps: Partial<IProps>) {
     const participant = getParticipantById(state, ownProps.participantId ?? '');
 
     return {

react/features/display-name/components/web/DisplayNamePrompt.tsx

@@ -9,13 +9,13 @@ import AbstractDisplayNamePrompt, { IProps } from '../AbstractDisplayNamePrompt'
 /**
  * The type of the React {@code Component} props of {@link DisplayNamePrompt}.
  */
-type State = {
+interface IState {
 
     /**
      * The name to show in the display name text field.
      */
     displayName: string;
-};
+}
 
 /**
  * Implements a React {@code Component} for displaying a dialog with an field
@@ -23,7 +23,7 @@ type State = {
  *
  * @augments Component
  */
-class DisplayNamePrompt extends AbstractDisplayNamePrompt<State> {
+class DisplayNamePrompt extends AbstractDisplayNamePrompt<IState> {
     /**
      * Initializes a new {@code DisplayNamePrompt} instance.
      *

react/features/e2ee/components/E2EESection.tsx

@@ -44,13 +44,13 @@ interface IProps extends WithTranslation {
     dispatch: IStore['dispatch'];
 }
 
-type State = {
+interface IState {
 
     /**
      * True if the switch is toggled on.
      */
     toggled: boolean;
-};
+}
 
 /**
  * Implements a React {@code Component} for displaying a security dialog section with a field
@@ -58,13 +58,13 @@ type State = {
  *
  * @augments Component
  */
-class E2EESection extends Component<IProps, State> {
+class E2EESection extends Component<IProps, IState> {
     /**
      * Implements React's {@link Component#getDerivedStateFromProps()}.
      *
      * @inheritdoc
      */
-    static getDerivedStateFromProps(props: IProps, state: State) {
+    static getDerivedStateFromProps(props: IProps, state: IState) {
         if (props._toggled !== state.toggled) {
 
             return {

react/features/face-landmarks/FaceLandmarksDetector.ts

@@ -23,7 +23,6 @@ import {
     sendFaceExpressionsWebhook
 } from './functions';
 import logger from './logger';
-declare const APP: any;
 
 /**
  * Class for face language detection.

react/features/filmstrip/components/web/Filmstrip.tsx

@@ -57,8 +57,6 @@ import ThumbnailWrapper from './ThumbnailWrapper';
 // @ts-ignore
 import { styles } from './styles';
 
-declare let APP: any;
-
 /**
  * The type of the React {@code Component} props of {@link Filmstrip}.
  */
@@ -230,7 +228,7 @@ interface IProps extends WithTranslation {
     filmstripType: string;
 }
 
-type State = {
+interface IState {
 
     /**
      * Initial top panel height on drag handle mouse down.
@@ -251,7 +249,7 @@ type State = {
      * Initial mouse position on drag handle mouse down.
      */
     mousePosition?: number | null;
-};
+}
 
 /**
  * Implements a React {@link Component} which represents the filmstrip on
@@ -259,7 +257,7 @@ type State = {
  *
  * @augments Component
  */
-class Filmstrip extends PureComponent <IProps, State> {
+class Filmstrip extends PureComponent <IProps, IState> {
 
     _throttledResize: Function;
 

react/features/filmstrip/components/web/PinnedIndicator.tsx

@@ -13,7 +13,7 @@ import { getPinnedActiveParticipants, isStageFilmstripAvailable } from '../../fu
 /**
  * The type of the React {@code Component} props of {@link PinnedIndicator}.
  */
-type Props = {
+interface IProps {
 
     /**
      * The font-size for the icon.
@@ -30,7 +30,7 @@ type Props = {
      * From which side of the indicator the tooltip should appear from.
      */
     tooltipPosition: string;
-};
+}
 
 const useStyles = makeStyles()(() => {
     return {
@@ -54,7 +54,7 @@ const PinnedIndicator = ({
     iconSize,
     participantId,
     tooltipPosition
-}: Props) => {
+}: IProps) => {
     const stageFilmstrip = useSelector(isStageFilmstripAvailable);
     const pinned = useSelector((state: IReduxState) => getParticipantById(state, participantId))?.pinned;
     const activePinnedParticipants: Array<{ participantId: string; pinned: boolean; }>

react/features/filmstrip/components/web/RaisedHandIndicator.tsx

@@ -12,7 +12,7 @@ import BaseIndicator from '../../../base/react/components/web/BaseIndicator';
 /**
  * The type of the React {@code Component} props of {@link RaisedHandIndicator}.
  */
-type Props = {
+interface IProps {
 
     /**
      * The font-size for the icon.
@@ -29,7 +29,7 @@ type Props = {
      * From which side of the indicator the tooltip should appear from.
      */
     tooltipPosition: string;
-};
+}
 
 const useStyles = makeStyles()((theme: Theme) => {
     return {
@@ -53,7 +53,7 @@ const RaisedHandIndicator = ({
     iconSize,
     participantId,
     tooltipPosition
-}: Props) => {
+}: IProps) => {
     const participant: IParticipant | undefined = useSelector((state: IReduxState) =>
         getParticipantById(state, participantId));
     const _raisedHand = hasRaisedHand(participant);

react/features/filmstrip/components/web/Thumbnail.tsx

@@ -75,12 +75,10 @@ import ThumbnailTopIndicators from './ThumbnailTopIndicators';
 // @ts-ignore
 import VirtualScreenshareParticipant from './VirtualScreenshareParticipant';
 
-declare let interfaceConfig: any;
-
 /**
  * The type of the React {@code Component} state of {@link Thumbnail}.
  */
-export type State = {
+export interface IState {
 
     /**
      * Indicates that the canplay event has been received.
@@ -101,12 +99,12 @@ export type State = {
      * Whether popover is visible or not.
      */
     popoverVisible: boolean;
-};
+}
 
 /**
  * The type of the React {@code Component} props of {@link Thumbnail}.
  */
-export type Props = {
+export interface IProps {
 
     /**
      * The audio track related to the participant.
@@ -277,7 +275,7 @@ export type Props = {
      * there is empty space.
      */
     width?: number;
-};
+}
 
 const defaultStyles = (theme: Theme) => {
     return {
@@ -384,7 +382,7 @@ const defaultStyles = (theme: Theme) => {
  *
  * @augments Component
  */
-class Thumbnail extends Component<Props, State> {
+class Thumbnail extends Component<IProps, IState> {
     /**
      * The long touch setTimeout handler.
      */
@@ -402,7 +400,7 @@ class Thumbnail extends Component<Props, State> {
      * @param {Object} props - The read-only React Component props with which
      * the new instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         const state = {
@@ -487,7 +485,7 @@ class Thumbnail extends Component<Props, State> {
      * @inheritdoc
      * @returns {void}
      */
-    componentDidUpdate(prevProps: Props, prevState: State) {
+    componentDidUpdate(prevProps: IProps, prevState: IState) {
         if (prevState.displayMode !== this.state.displayMode) {
             this._onDisplayModeChanged();
         }
@@ -567,7 +565,7 @@ class Thumbnail extends Component<Props, State> {
      *
      * @inheritdoc
      */
-    static getDerivedStateFromProps(props: Props, prevState: State) {
+    static getDerivedStateFromProps(props: IProps, prevState: IState) {
         if (!props._videoTrack && prevState.canPlayEventReceived) {
             const newState = {
                 ...prevState,
@@ -1168,7 +1166,7 @@ class Thumbnail extends Component<Props, State> {
  * @param {Object} state - The Redux state.
  * @param {Object} ownProps - The own props of the component.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
 function _mapStateToProps(state: IReduxState, ownProps: any): Object {
     const { participantID, filmstripType = FILMSTRIP_TYPE.MAIN } = ownProps;

react/features/filmstrip/components/web/ThumbnailBottomIndicators.tsx

@@ -17,9 +17,7 @@ import { THUMBNAIL_TYPE } from '../../constants';
 // @ts-ignore
 import StatusIndicators from './StatusIndicators';
 
-declare let interfaceConfig: any;
-
-type Props = {
+interface IProps {
 
     /**
      * Class name for indicators container.
@@ -45,7 +43,7 @@ type Props = {
      * The type of thumbnail.
      */
     thumbnailType: string;
-};
+}
 
 const useStyles = makeStyles()(() => {
     return {
@@ -72,7 +70,7 @@ const ThumbnailBottomIndicators = ({
     participantId,
     showStatusIndicators = true,
     thumbnailType
-}: Props) => {
+}: IProps) => {
     const { classes: styles } = useStyles();
     const _allowEditing = !useSelector(isNameReadOnly);
     const _defaultLocalDisplayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME;

react/features/filmstrip/components/web/ThumbnailTopIndicators.tsx

@@ -19,9 +19,7 @@ import RaisedHandIndicator from './RaisedHandIndicator';
 import StatusIndicators from './StatusIndicators';
 import VideoMenuTriggerButton from './VideoMenuTriggerButton';
 
-declare let interfaceConfig: any;
-
-type Props = {
+interface IProps {
 
     /**
      * Whether to hide the connection indicator.
@@ -67,7 +65,7 @@ type Props = {
      * The type of thumbnail.
      */
     thumbnailType: string;
-};
+}
 
 const useStyles = makeStyles()(() => {
     return {
@@ -91,7 +89,7 @@ const ThumbnailTopIndicators = ({
     popoverVisible,
     showPopover,
     thumbnailType
-}: Props) => {
+}: IProps) => {
     const { classes: styles, cx } = useStyles();
 
     const _isMobile = isMobileBrowser();

react/features/filmstrip/components/web/VideoMenuTriggerButton.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import LocalVideoMenuTriggerButton from '../../../video-menu/components/web/LocalVideoMenuTriggerButton';
 import RemoteVideoMenuTriggerButton from '../../../video-menu/components/web/RemoteVideoMenuTriggerButton';
 
-type Props = {
+interface IProps {
 
     /**
      * Hide popover callback.
@@ -39,7 +39,7 @@ type Props = {
      * Whether or not the component is visible.
      */
     visible: boolean;
-};
+}
 
 // eslint-disable-next-line no-confusing-arrow
 const VideoMenuTriggerButton = ({
@@ -50,7 +50,7 @@ const VideoMenuTriggerButton = ({
     showPopover,
     thumbnailType,
     visible
-}: Props) => local
+}: IProps) => local
     ? (
         <span id = 'localvideomenu'>
             <LocalVideoMenuTriggerButton

react/features/lobby/components/web/LobbySection.tsx

@@ -29,18 +29,18 @@ interface IProps extends WithTranslation {
     dispatch: Function;
 }
 
-type State = {
+interface IState {
 
     /**
      * True if the lobby switch is toggled on.
      */
     lobbyEnabled: boolean;
-};
+}
 
 /**
  * Implements a security feature section to control lobby mode.
  */
-class LobbySection extends PureComponent<IProps, State> {
+class LobbySection extends PureComponent<IProps, IState> {
     /**
      * Instantiates a new component.
      *
@@ -61,7 +61,7 @@ class LobbySection extends PureComponent<IProps, State> {
      *
      * @inheritdoc
      */
-    static getDerivedStateFromProps(props: IProps, state: State) {
+    static getDerivedStateFromProps(props: IProps, state: IState) {
         if (props._lobbyEnabled !== state.lobbyEnabled) {
 
             return {

react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx

@@ -16,7 +16,7 @@ import { participantMatchesSearch } from '../../../../functions';
 import ParticipantActionEllipsis from '../../../web/ParticipantActionEllipsis';
 import ParticipantItem from '../../../web/ParticipantItem';
 
-type Props = {
+interface IProps {
 
     /**
      * Type of trigger for the breakout room actions.
@@ -78,7 +78,7 @@ type Props = {
      * Toggles the room participant context menu.
      */
     toggleParticipantMenu: Function;
-};
+}
 
 const useStyles = makeStyles()((theme: Theme) => {
     return {
@@ -118,7 +118,7 @@ export const CollapsibleRoom = ({
     room,
     searchString,
     toggleParticipantMenu
-}: Props) => {
+}: IProps) => {
     const { t } = useTranslation();
     const { classes: styles, cx } = useStyles();
     const [ collapsed, setCollapsed ] = useState(false);

react/features/participants-pane/components/breakout-rooms/components/web/JoinQuickActionButton.tsx

@@ -9,7 +9,7 @@ import { sendAnalytics } from '../../../../../analytics/functions';
 import Button from '../../../../../base/ui/components/web/Button';
 import { moveToRoom } from '../../../../../breakout-rooms/actions';
 
-type Props = {
+interface IProps {
 
     /**
      * The room to join.
@@ -18,7 +18,7 @@ type Props = {
         id: string;
         jid: string;
     };
-};
+}
 
 const useStyles = makeStyles()((theme: Theme) => {
     return {
@@ -28,7 +28,7 @@ const useStyles = makeStyles()((theme: Theme) => {
     };
 });
 
-const JoinActionButton = ({ room }: Props) => {
+const JoinActionButton = ({ room }: IProps) => {
     const { classes: styles } = useStyles();
     const { t } = useTranslation();
     const dispatch = useDispatch();

react/features/participants-pane/components/breakout-rooms/components/web/RoomActionEllipsis.tsx

@@ -4,15 +4,15 @@ import { useTranslation } from 'react-i18next';
 import { IconHorizontalPoints } from '../../../../../base/icons/svg';
 import Button from '../../../../../base/ui/components/web/Button';
 
-type Props = {
+interface IProps {
 
     /**
      * Click handler function.
      */
     onClick: () => void;
-};
+}
 
-const RoomActionEllipsis = ({ onClick }: Props) => {
+const RoomActionEllipsis = ({ onClick }: IProps) => {
     const { t } = useTranslation();
 
     return (

react/features/participants-pane/components/breakout-rooms/components/web/RoomParticipantContextMenu.tsx

@@ -17,7 +17,7 @@ import SendToRoomButton from '../../../../../video-menu/components/web/SendToRoo
 import { AVATAR_SIZE } from '../../../../constants';
 
 
-type Props = {
+interface IProps {
 
     /**
      * Room and participant jid reference.
@@ -47,7 +47,7 @@ type Props = {
      * Callback for making a selection in the menu.
      */
     onSelect: (force?: any) => void;
-};
+}
 
 const useStyles = makeStyles()((theme: Theme) => {
     return {
@@ -69,7 +69,7 @@ export const RoomParticipantContextMenu = ({
     onEnter,
     onLeave,
     onSelect
-}: Props) => {
+}: IProps) => {
     const { classes: styles } = useStyles();
     const { t } = useTranslation();
     const isLocalModerator = useSelector(isLocalParticipantModerator);

react/features/participants-pane/components/web/FooterContextMenu.tsx

@@ -68,7 +68,7 @@ const useStyles = makeStyles()((theme: Theme) => {
     };
 });
 
-type Props = {
+interface IProps {
 
     /**
      * Whether the menu is open.
@@ -84,9 +84,9 @@ type Props = {
      * Callback for the mouse leaving this item.
      */
     onMouseLeave?: (e?: React.MouseEvent) => void;
-};
+}
 
-export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props) => {
+export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: IProps) => {
     const dispatch = useDispatch();
     const isModerationSupported = useSelector((state: IReduxState) => isAvModerationSupported()(state));
     const allModerators = useSelector(isEveryoneModerator);

react/features/participants-pane/components/web/LobbyParticipantItem.tsx

@@ -19,7 +19,7 @@ import { useLobbyActions } from '../../hooks';
 
 import ParticipantItem from './ParticipantItem';
 
-type Props = {
+interface IProps {
 
     /**
      * Callback used to open a drawer with admit/reject actions.
@@ -35,7 +35,7 @@ type Props = {
      * Participant reference.
      */
     participant: IParticipant;
-};
+}
 
 const useStyles = makeStyles()((theme: Theme) => {
     return {
@@ -59,7 +59,7 @@ export const LobbyParticipantItem = ({
     overflowDrawer,
     participant: p,
     openDrawerForParticipant
-}: Props) => {
+}: IProps) => {
     const { id } = p;
     const [ admit, reject, chat ] = useLobbyActions({ participantID: id });
     const { t } = useTranslation();

react/features/participants-pane/components/web/MeetingParticipants.tsx

@@ -53,7 +53,7 @@ const useStyles = makeStyles()((theme: Theme) => {
     };
 });
 
-type Props = {
+interface IProps {
     currentRoom?: { name: string; };
     overflowDrawer?: boolean;
     participantsCount?: number;
@@ -61,7 +61,7 @@ type Props = {
     setSearchString: (newValue: string) => void;
     showInviteButton?: boolean;
     sortedParticipantIds?: Array<string>;
-};
+}
 
 /**
  * Renders the MeetingParticipantList component.
@@ -81,7 +81,7 @@ function MeetingParticipants({
     setSearchString,
     showInviteButton,
     sortedParticipantIds = []
-}: Props) {
+}: IProps) {
     const dispatch = useDispatch();
     const { t } = useTranslation();
 
@@ -158,7 +158,7 @@ function MeetingParticipants({
  * @param {Object} state - The Redux state.
  * @param {Object} ownProps - The own props of the component.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
 function _mapStateToProps(state: IReduxState): Object {
     let sortedParticipantIds: any = getSortedParticipantIds(state);

react/features/participants-pane/components/web/ParticipantActionEllipsis.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { IconHorizontalPoints } from '../../../base/icons/svg';
 import Button from '../../../base/ui/components/web/Button';
 
-type Props = {
+interface IProps {
 
     /**
      * Label used for accessibility.
@@ -14,9 +14,9 @@ type Props = {
      * Click handler function.
      */
     onClick: () => void;
-};
+}
 
-const ParticipantActionEllipsis = ({ accessibilityLabel, onClick }: Props) => (
+const ParticipantActionEllipsis = ({ accessibilityLabel, onClick }: IProps) => (
     <Button
         accessibilityLabel = { accessibilityLabel }
         icon = { IconHorizontalPoints }

react/features/participants-pane/components/web/ParticipantQuickAction.tsx

@@ -8,7 +8,7 @@ import { approveParticipant } from '../../../av-moderation/actions';
 import Button from '../../../base/ui/components/web/Button';
 import { QUICK_ACTION_BUTTON } from '../../constants';
 
-type Props = {
+interface IProps {
 
     /**
      * The translated ask unmute aria label.
@@ -44,7 +44,7 @@ type Props = {
      * The name of the participant.
      */
     participantName: string;
-};
+}
 
 const useStyles = makeStyles()((theme: Theme) => {
     return {
@@ -61,7 +61,7 @@ const ParticipantQuickAction = ({
     muteParticipantButtonText,
     participantID,
     participantName
-}: Props) => {
+}: IProps) => {
     const { classes: styles } = useStyles();
     const dispatch = useDispatch();
     const { t } = useTranslation();

react/features/participants-pane/middleware.ts

@@ -2,8 +2,6 @@ import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 
 import { PARTICIPANTS_PANE_CLOSE, PARTICIPANTS_PANE_OPEN } from './actionTypes';
 
-declare let APP: any;
-
 /**
  * Middleware which intercepts participants pane actions.
  *

react/features/prejoin/components/web/DropdownButton.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../../../base/icons/components/Icon';
 
-type Props = {
+interface IProps {
 
     /**
      * Attribute used in automated testing.
@@ -30,7 +30,7 @@ type Props = {
      * Function to be called on key pressed.
      */
     onKeyPressed: (e?: React.KeyboardEvent) => void;
-};
+}
 
 
 const useStyles = makeStyles()((theme: Theme) => {
@@ -72,7 +72,7 @@ const DropdownButton = ({
     onButtonClick,
     onKeyPressed,
     label
-}: Props) => {
+}: IProps) => {
     const { classes } = useStyles();
 
     return (

react/features/reactions/components/web/ReactionEmoji.tsx

@@ -5,7 +5,7 @@ import { IStore } from '../../../app/types';
 import { removeReaction } from '../../actions.any';
 import { REACTIONS } from '../../constants';
 
-type Props = {
+interface IProps {
 
     /**
      * Index of the reaction in the queue.
@@ -26,15 +26,15 @@ type Props = {
      * Id of the reaction.
      */
     uid: string;
-};
+}
 
-type State = {
+interface IState {
 
     /**
      * Index of CSS animation. Number between 0-20.
      */
     index: number;
-};
+}
 
 
 /**
@@ -42,14 +42,14 @@ type State = {
  *
  * @returns {ReactElement}
  */
-class ReactionEmoji extends Component<Props, State> {
+class ReactionEmoji extends Component<IProps, IState> {
     /**
      * Initializes a new {@code ReactionEmoji} instance.
      *
-     * @param {Props} props - The read-only React {@code Component} props with
+     * @param {IProps} props - The read-only React {@code Component} props with
      * which the new instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {

react/features/recording/components/Recording/web/HighlightButton.tsx

@@ -39,13 +39,13 @@ type Props = AbstractProps & {
 /**
  * The type of the React {@code Component} state of {@link HighlightButton}.
  */
-type State = {
+interface IState {
 
     /**
      * Whether the notification which prompts for starting recording is open is not.
      */
     isNotificationOpen: boolean;
-};
+}
 
 /**
  * Creates the styles for the component.
@@ -94,7 +94,7 @@ const styles = (theme: Theme) => {
  * React {@code Component} responsible for displaying an action that
  * allows users to highlight a meeting moment.
  */
-export class HighlightButton extends AbstractHighlightButton<Props, State> {
+export class HighlightButton extends AbstractHighlightButton<Props, IState> {
     /**
      * Initializes a new HighlightButton instance.
      *

react/features/salesforce/components/web/RecordItem.tsx

@@ -8,7 +8,7 @@ import { RECORD_TYPE } from '../../constants';
 /**
  * The type of the React {@code Component} props of {@link RecordItem}.
  */
-type Props = {
+interface IProps {
 
     /**
      * The id of the record.
@@ -29,7 +29,7 @@ type Props = {
      * The type of the record.
      */
     type: string;
-};
+}
 
 const useStyles = makeStyles()((theme: Theme) => {
     return {
@@ -70,7 +70,7 @@ const useStyles = makeStyles()((theme: Theme) => {
 /**
  * Component to render Record data.
  *
- * @param {Props} props - The props of the component.
+ * @param {IProps} props - The props of the component.
  * @returns {React$Element<any>}
  */
 export const RecordItem = ({
@@ -79,7 +79,7 @@ export const RecordItem = ({
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onClick = () => {},
     type
-}: Props) => {
+}: IProps) => {
     const { t } = useTranslation();
     const Icon = RECORD_TYPE[type as keyof typeof RECORD_TYPE].icon;
     const { classes } = useStyles();

react/features/security/components/security-dialog/web/PasswordForm.tsx

@@ -46,26 +46,26 @@ interface IProps extends WithTranslation {
 /**
  * The type of the React {@code Component} state of {@link PasswordForm}.
  */
-type State = {
+interface IState {
 
     /**
      * The value of the password being entered by the local participant.
      */
     enteredPassword: string;
-};
+}
 
 /**
  * React {@code Component} for displaying and editing the conference password.
  *
  * @augments Component
  */
-class PasswordForm extends Component<IProps, State> {
+class PasswordForm extends Component<IProps, IState> {
     /**
      * Implements React's {@link Component#getDerivedStateFromProps()}.
      *
      * @inheritdoc
      */
-    static getDerivedStateFromProps(props: IProps, state: State) {
+    static getDerivedStateFromProps(props: IProps, state: IState) {
         return {
             enteredPassword: props.editEnabled ? state.enteredPassword : ''
         };

react/features/security/components/security-dialog/web/PasswordSection.tsx

@@ -63,8 +63,6 @@ interface IProps extends WithTranslation {
     setPasswordEditEnabled: Function;
 }
 
-declare let APP: any;
-
 /**
  * Component that handles the password manipulation from the invite dialog.
  *

react/features/security/components/security-dialog/web/SecurityDialog.tsx

@@ -18,7 +18,7 @@ export interface INotifyClick {
     preventExecution: boolean;
 }
 
-type Props = {
+interface IProps {
 
     /**
      * Toolbar buttons which have their click exposed through the API.
@@ -61,7 +61,7 @@ type Props = {
      * Action that sets the conference password.
      */
     setPassword: Function;
-};
+}
 
 /**
  * Component that renders the security options dialog.
@@ -77,7 +77,7 @@ function SecurityDialog({
     _passwordNumberOfDigits,
     _showE2ee,
     setPassword
-}: Props) {
+}: IProps) {
     const [ passwordEditEnabled, setPasswordEditEnabled ] = useState(false);
 
     useEffect(() => {
@@ -121,7 +121,7 @@ function SecurityDialog({
  *
  * @param {Object} state - The Redux state.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
 function mapStateToProps(state: IReduxState) {
     const {

react/features/settings/components/native/HelpView.tsx

@@ -19,7 +19,7 @@ import styles from './styles';
 
 const DEFAULT_HELP_CENTRE_URL = 'https://web-cdn.jitsi.net/faq/meet-faq.html';
 
-type Props = {
+interface IProps {
 
     /**
      * The URL to display in the Help Centre.
@@ -30,12 +30,12 @@ type Props = {
      * Default prop for navigating between screen components(React Navigation).
      */
     navigation: Object;
-};
+}
 
 /**
  * Implements a page that renders the help content for the app.
  */
-class HelpView extends PureComponent<Props> {
+class HelpView extends PureComponent<IProps> {
     /**
      * Implements React's {@link Component#componentDidMount()}. Invoked
      * immediately after mounting occurs.
@@ -79,7 +79,7 @@ class HelpView extends PureComponent<Props> {
  * Maps part of the Redux state to the props of this component.
  *
  * @param {Object} state - The Redux state.
- * @returns {Props}
+ * @returns {IProps}
  */
 function _mapStateToProps(state: IReduxState) {
     return {

react/features/settings/components/native/PrivacyView.tsx

@@ -15,20 +15,20 @@ import { renderArrowBackButton }
 import styles from './styles';
 
 
-type Props = {
+interface IProps {
 
     /**
      * Default prop for navigating between screen components(React Navigation).
      */
     navigation: Object;
-};
+}
 
 /**
  * The URL at which the privacy policy is available to the user.
  */
 const PRIVACY_URL = 'https://jitsi.org/meet/privacy';
 
-const PrivacyView = ({ navigation }: Props) => {
+const PrivacyView = ({ navigation }: IProps) => {
 
     useEffect(() => {
         // @ts-ignore

react/features/settings/components/native/TermsView.tsx

@@ -15,20 +15,20 @@ import { renderArrowBackButton }
 import styles from './styles';
 
 
-type Props = {
+interface IProps {
 
     /**
      * Default prop for navigating between screen components(React Navigation).
      */
     navigation: Object;
-};
+}
 
 /**
  * The URL at which the terms (of service/use) are available to the user.
  */
 const TERMS_URL = 'https://jitsi.org/meet/terms';
 
-const TermsView = ({ navigation }: Props) => {
+const TermsView = ({ navigation }: IProps) => {
 
     useEffect(() => {
         // @ts-ignore

react/features/settings/components/web/MoreTab.tsx

@@ -4,7 +4,7 @@ import { WithTranslation } from 'react-i18next';
 // @ts-expect-error
 import keyboardShortcut from '../../../../../modules/keyboardshortcut/keyboardshortcut';
 import AbstractDialogTab, {
-    Props as AbstractDialogTabProps
+    IProps as AbstractDialogTabProps
 } from '../../../base/dialog/components/web/AbstractDialogTab';
 import { translate } from '../../../base/i18n/functions';
 import Checkbox from '../../../base/ui/components/web/Checkbox';

react/features/settings/components/web/ProfileTab.tsx

@@ -16,8 +16,6 @@ import Input from '../../../base/ui/components/web/Input';
 // @ts-ignore
 import { openLogoutDialog } from '../../actions';
 
-declare let APP: any;
-
 /**
  * The type of the React {@code Component} props of {@link ProfileTab}.
  */

react/features/settings/components/web/SettingsDialog.tsx

@@ -41,13 +41,11 @@ import MoreTab from './MoreTab';
 import ProfileTab from './ProfileTab';
 import SoundsTab from './SoundsTab';
 
-declare let interfaceConfig: any;
-
 /**
  * The type of the React {@code Component} props of
  * {@link ConnectedSettingsDialog}.
  */
-type Props = {
+interface IProps {
 
     /**
      * Information about the tabs to be rendered.
@@ -79,7 +77,7 @@ type Props = {
      * welcome page or not.
      */
     isDisplayedOnWelcomePage: boolean;
-};
+}
 
 /**
  * Creates the styles for the component.
@@ -222,14 +220,14 @@ const styles = (theme: Theme) => {
  *
  * @augments Component
  */
-class SettingsDialog extends Component<Props> {
+class SettingsDialog extends Component<IProps> {
     /**
      * Initializes a new {@code ConnectedSettingsDialog} instance.
      *
-     * @param {Props} props - The React {@code Component} props to initialize
+     * @param {IProps} props - The React {@code Component} props to initialize
      * the new {@code ConnectedSettingsDialog} instance with.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         // Bind event handlers so they are only bound once for every instance.

react/features/speaker-stats/components/web/FaceExpressionsSwitch.tsx

@@ -23,7 +23,7 @@ const useStyles = makeStyles()((theme: Theme) => {
 /**
  * The type of the React {@code Component} props of {@link ToggleFaceExpressionsButton}.
  */
-type Props = {
+interface IProps {
 
     /**
      * The function to initiate the change in the speaker stats table.
@@ -35,14 +35,14 @@ type Props = {
      */
     showFaceExpressions: boolean;
 
-};
+}
 
 /**
  * React component for toggling face expressions grid.
  *
  * @returns {React$Element<any>}
  */
-export default function FaceExpressionsSwitch({ onChange, showFaceExpressions }: Props) {
+export default function FaceExpressionsSwitch({ onChange, showFaceExpressions }: IProps) {
     const { classes } = useStyles();
     const { t } = useTranslation();
 

react/features/speaker-stats/components/web/SpeakerStatsLabels.tsx

@@ -25,15 +25,15 @@ const useStyles = makeStyles()((theme: Theme) => {
 /**
  * The type of the React {@code Component} props of {@link SpeakerStatsLabels}.
  */
-type Props = {
+interface IProps {
 
     /**
      * True if the face expressions detection is not disabled.
      */
     showFaceExpressions: boolean;
-};
+}
 
-const SpeakerStatsLabels = (props: Props) => {
+const SpeakerStatsLabels = (props: IProps) => {
     const { t } = useTranslation();
     const { classes } = useStyles();
     const nameTimeClass = `name-time${

react/features/speaker-stats/components/web/SpeakerStatsSearch.tsx

@@ -55,21 +55,21 @@ const useStyles = makeStyles()((theme: Theme) => {
 /**
  * The type of the React {@code Component} props of {@link SpeakerStatsSearch}.
  */
-type Props = {
+interface IProps {
 
     /**
      * The function to initiate the change in the speaker stats table.
      */
     onSearch: Function;
 
-};
+}
 
 /**
  * React component for display an individual user's speaker stats.
  *
  * @returns {React$Element<any>}
  */
-function SpeakerStatsSearch({ onSearch }: Props) {
+function SpeakerStatsSearch({ onSearch }: IProps) {
     const { classes, theme } = useStyles();
     const { t } = useTranslation();
     const disableSpeakerStatsSearch = useSelector(isSpeakerStatsSearchDisabled);

react/features/toolbox/components/web/Drawer.tsx

@@ -5,7 +5,7 @@ import { makeStyles } from 'tss-react/mui';
 import { DRAWER_MAX_HEIGHT } from '../../constants';
 
 
-type Props = {
+interface IProps {
 
     /**
      * The component(s) to be displayed within the drawer menu.
@@ -26,7 +26,7 @@ type Props = {
      * Function that hides the drawer.
      */
     onClose: Function;
-};
+}
 
 const useStyles = makeStyles()((theme: Theme) => {
     return {
@@ -48,7 +48,7 @@ function Drawer({
     className = '',
     isOpen,
     onClose
-}: Props) {
+}: IProps) {
     const { classes: styles } = useStyles();
 
     /**

react/features/toolbox/components/web/Toolbox.tsx

@@ -350,8 +350,6 @@ interface IProps extends WithTranslation {
     toolbarButtons: Array<string>;
 }
 
-declare let APP: any;
-
 const styles = () => {
     return {
         contextMenu: {

react/features/toolbox/subscriber.ts

@@ -3,8 +3,6 @@ import StateListenerRegistry from '../base/redux/StateListenerRegistry';
 
 import { isAudioMuteButtonDisabled } from './functions.any';
 
-declare let APP: any;
-
 /**
  * Notifies when audio availability changes.
  */

react/features/video-menu/components/AbstractMuteEveryoneDialog.ts

@@ -26,10 +26,10 @@ export type Props = AbstractProps & WithTranslation & {
     title: string;
 };
 
-type State = {
+interface IState {
     audioModerationEnabled: boolean;
     content: string;
-};
+}
 
 /**
  *
@@ -38,7 +38,8 @@ type State = {
  *
  * @augments AbstractMuteRemoteParticipantDialog
  */
-export default class AbstractMuteEveryoneDialog<P extends Props> extends AbstractMuteRemoteParticipantDialog<P, State> {
+export default class AbstractMuteEveryoneDialog<P extends Props> extends
+    AbstractMuteRemoteParticipantDialog<P, IState> {
     static defaultProps = {
         exclude: [],
         muteLocal: false

react/features/video-menu/components/AbstractMuteEveryonesVideoDialog.ts

@@ -26,10 +26,10 @@ export type Props = AbstractProps & WithTranslation & {
     title: string;
 };
 
-type State = {
+interface IState {
     content: string;
     moderationEnabled: boolean;
-};
+}
 
 /**
  *
@@ -39,7 +39,7 @@ type State = {
  * @augments AbstractMuteRemoteParticipantsVideoDialog
  */
 export default class AbstractMuteEveryonesVideoDialog<P extends Props>
-    extends AbstractMuteRemoteParticipantsVideoDialog<P, State> {
+    extends AbstractMuteRemoteParticipantsVideoDialog<P, IState> {
     static defaultProps = {
         exclude: [],
         muteLocal: false

react/features/video-menu/components/web/FakeParticipantContextMenu.tsx

@@ -19,7 +19,7 @@ import { showOverflowDrawer } from '../../../toolbox/functions.web';
 import { setWhiteboardOpen } from '../../../whiteboard/actions';
 import { WHITEBOARD_ID } from '../../../whiteboard/constants';
 
-type Props = {
+interface IProps {
 
     /**
      * Class name for the context menu.
@@ -74,7 +74,7 @@ type Props = {
      * Whether or not the menu is displayed in the thumbnail remote video menu.
      */
     thumbnailMenu?: boolean;
-};
+}
 
 const FakeParticipantContextMenu = ({
     className,
@@ -87,7 +87,7 @@ const FakeParticipantContextMenu = ({
     onSelect,
     participant,
     thumbnailMenu
-}: Props) => {
+}: IProps) => {
     const dispatch = useDispatch();
     const { t } = useTranslation();
     const _overflowDrawer: boolean = useSelector(showOverflowDrawer);

react/features/video-menu/components/web/ParticipantContextMenu.tsx

@@ -49,7 +49,7 @@ import {
     // @ts-ignore
 } from './';
 
-type Props = {
+interface IProps {
 
     /**
      * Class name for the context menu.
@@ -104,7 +104,7 @@ type Props = {
      * Whether or not the menu is displayed in the thumbnail remote video menu.
      */
     thumbnailMenu?: boolean;
-};
+}
 
 const useStyles = makeStyles()((theme: Theme) => {
     return {
@@ -131,7 +131,7 @@ const ParticipantContextMenu = ({
     participant,
     remoteControlState,
     thumbnailMenu
-}: Props) => {
+}: IProps) => {
     const dispatch = useDispatch();
     const { t } = useTranslation();
     const { classes: styles } = useStyles();

react/features/video-menu/components/web/VolumeSlider.tsx

@@ -35,14 +35,14 @@ interface IProps extends WithTranslation {
 /**
  * The type of the React {@code Component} state of {@link VolumeSlider}.
  */
-type State = {
+interface IState {
 
     /**
      * The volume of the participant's audio element. The value will
      * be represented by a slider.
      */
     volumeLevel: number;
-};
+}
 
 const styles = (theme: Theme) => {
     return {
@@ -88,7 +88,7 @@ const styles = (theme: Theme) => {
  *
  * @augments Component
  */
-class VolumeSlider extends Component<IProps, State> {
+class VolumeSlider extends Component<IProps, IState> {
     /**
      * Initializes a new {@code VolumeSlider} instance.
      *

react/features/video-quality/components/Slider.web.tsx

@@ -2,7 +2,7 @@ import { Theme } from '@mui/material';
 import React from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-type Props = {
+interface IProps {
 
     /**
      * The 'aria-label' text.
@@ -33,7 +33,7 @@ type Props = {
      * The current value where the knob is positioned.
      */
     value: number;
-};
+}
 
 const useStyles = makeStyles()((theme: Theme) => {
     // keep the same height for all elements:
@@ -138,7 +138,7 @@ const useStyles = makeStyles()((theme: Theme) => {
  *
  *  @returns {ReactElement}
  */
-function Slider({ ariaLabel, max, min, onChange, step, value }: Props) {
+function Slider({ ariaLabel, max, min, onChange, step, value }: IProps) {
     const { classes, cx } = useStyles();
     const knobs = [ ...Array(Math.floor((max - min) / step) + 1) ];
 

react/features/virtual-background/components/VirtualBackgroundPreview.tsx

@@ -24,7 +24,7 @@ const videoClassName = 'video-preview-video';
 /**
  * The type of the React {@code PureComponent} props of {@link VirtualBackgroundPreview}.
  */
-export type Props = WithTranslation & {
+export interface IProps extends WithTranslation {
 
     /**
      * The deviceId of the camera device currently being used.
@@ -50,12 +50,12 @@ export type Props = WithTranslation & {
      * Represents the virtual background set options.
      */
     options: any;
-};
+}
 
 /**
  * The type of the React {@code Component} state of {@link VirtualBackgroundPreview}.
  */
-type State = {
+interface IState {
 
     /**
      * Activate the selected device camera only.
@@ -71,7 +71,7 @@ type State = {
      * Flag that indicates if the local track was loaded.
      */
     localTrackLoaded: boolean;
-};
+}
 
 /**
  * Creates the styles for the component.
@@ -127,7 +127,7 @@ const styles = (theme: Theme) => {
  *
  * @augments PureComponent
  */
-class VirtualBackgroundPreview extends PureComponent<Props, State> {
+class VirtualBackgroundPreview extends PureComponent<IProps, IState> {
     _componentWasUnmounted: boolean;
 
     /**
@@ -136,7 +136,7 @@ class VirtualBackgroundPreview extends PureComponent<Props, State> {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
@@ -290,7 +290,7 @@ class VirtualBackgroundPreview extends PureComponent<Props, State> {
      *
      * @inheritdoc
      */
-    async componentDidUpdate(prevProps: Props) {
+    async componentDidUpdate(prevProps: IProps) {
         if (!equals(this.props._currentCameraDeviceId, prevProps._currentCameraDeviceId)) {
             this._setTracks();
         }

react/features/whiteboard/components/web/Whiteboard.tsx

@@ -26,8 +26,6 @@ import {
  */
 const HEIGHT_OFFSET = 80;
 
-declare const interfaceConfig: any;
-
 interface IDimensions {
 
     /* The height of the component. */