ref: Improve TS files (#12130)

Remove unnecessary ts-ignores
Change any to actual types
Fix eslint rule

react/.eslintrc.js

@@ -21,7 +21,9 @@ module.exports = {
                 'no-shadow': 'off',
                 '@typescript-eslint/no-shadow': [ 'error' ],
                 'typescript-sort-keys/interface': 'error',
-                'typescript-sort-keys/string-enum': 'error'
+                'typescript-sort-keys/string-enum': 'error',
+                'object-curly-spacing': 'off',
+                '@typescript-eslint/object-curly-spacing': [ 'error', 'always' ]
             },
             'plugins': [ '@typescript-eslint', 'typescript-sort-keys' ],
             'extends': [

react/features/av-moderation/constants.ts

@@ -11,7 +11,7 @@ export const MEDIA_TYPE_TO_WHITELIST_STORE_KEY: { [key: string]: string } = {
 /**
  * Mapping between a media type and the pending reducer key.
  */
-export const MEDIA_TYPE_TO_PENDING_STORE_KEY: {[key: string]: string} = {
+export const MEDIA_TYPE_TO_PENDING_STORE_KEY: { [key: string]: 'pendingAudio' | 'pendingVideo' } = {
     [MEDIA_TYPE.AUDIO]: 'pendingAudio',
     [MEDIA_TYPE.VIDEO]: 'pendingVideo'
 };

react/features/av-moderation/reducer.ts

@@ -4,6 +4,7 @@ import {
     PARTICIPANT_LEFT,
     PARTICIPANT_UPDATED
 } from '../base/participants/actionTypes';
+import { Participant } from '../base/participants/types';
 import ReducerRegistry from '../base/redux/ReducerRegistry';
 
 import {
@@ -47,11 +48,11 @@ export interface IAVModerationState {
  * @private
  * @returns {boolean} - Whether state instance was modified.
  */
-function _updatePendingParticipant(mediaType: MediaType, participant: any, state: any = {}) {
+function _updatePendingParticipant(mediaType: MediaType, participant: Participant, state: IAVModerationState) {
     let arrayItemChanged = false;
     const storeKey = MEDIA_TYPE_TO_PENDING_STORE_KEY[mediaType];
     const arr = state[storeKey];
-    const newArr = arr.map((pending: { id: string}) => {
+    const newArr = arr.map((pending: { id: string }) => {
         if (pending.id === participant.id) {
             arrayItemChanged = true;
 

react/features/base/buttons/CopyButton.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 
 import Icon from '../icons/components/Icon';
-import { IconCheck, IconCopy } from '../icons/svg/index';
+import { IconCheck, IconCopy } from '../icons/svg';
 import { withPixelLineHeight } from '../styles/functions.web';
 import { Theme } from '../ui/types';
 import { copyText } from '../util/helpers';

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

@@ -2,7 +2,6 @@ import { makeStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import React, { ReactNode } from 'react';
 
-// @ts-ignore
 import { ACTION_TRIGGER } from '../../../participants-pane/constants';
 import { isMobileBrowser } from '../../environment/utils';
 import participantsPaneTheme from '../themes/participantsPaneTheme.json';
@@ -17,7 +16,7 @@ type Props = {
     /**
      * List item container class name.
      */
-    className: string,
+    className?: string,
 
     /**
      * Whether or not the actions should be hidden.
@@ -32,7 +31,7 @@ type Props = {
     /**
      * Id of the container.
      */
-    id: string,
+    id?: string,
 
     /**
      * Indicators to be displayed on the list item.
@@ -47,17 +46,17 @@ type Props = {
     /**
      * Click handler.
      */
-    onClick: (e?: React.MouseEvent) => void,
+    onClick?: (e?: React.MouseEvent) => void,
 
     /**
      * Long press handler.
      */
-    onLongPress: (e?: EventTarget) => void,
+    onLongPress?: (e?: EventTarget) => void,
 
     /**
      * Mouse leave handler.
      */
-    onMouseLeave: (e?: React.MouseEvent) => void,
+    onMouseLeave?: (e?: React.MouseEvent) => void,
 
     /**
      * Data test id.
@@ -204,7 +203,7 @@ const ListItem = ({
     function _onTouchStart(e: React.TouchEvent) {
         const target = e.touches[0].target;
 
-        timeoutHandler = window.setTimeout(() => onLongPress(target), 600);
+        timeoutHandler = window.setTimeout(() => onLongPress?.(target), 600);
     }
 
     /**

react/features/base/conference/reducer.ts

@@ -41,23 +41,24 @@ const DEFAULT_STATE = {
 };
 
 export interface IConferenceState {
-    authEnabled?: boolean|undefined;
-    authLogin?: string|undefined;
+    authEnabled?: boolean;
+    authLogin?: string;
     authRequired?: Object;
-    conference: any|undefined;
+    conference?: any;
     conferenceTimestamp?: number;
-    e2eeSupported: boolean|undefined;
+    e2eeSupported?: boolean;
+    error?: Error;
     followMeEnabled?: boolean;
-    joining: Object|undefined;
-    leaving: Object|undefined;
+    joining?: Object;
+    leaving?: Object;
     localSubject?: string;
-    locked: string|undefined;
-    membersOnly: boolean|undefined;
+    locked?: string;
+    membersOnly?: Object;
     obfuscatedRoom?: string;
     obfuscatedRoomSource?: string;
     p2p?: Object;
-    password: string|undefined;
-    passwordRequired: boolean|undefined;
+    password?: string;
+    passwordRequired?: Object;
     pendingSubjectChange?: string;
     room?: Object;
     startAudioMutedPolicy?: boolean;
@@ -152,7 +153,8 @@ ReducerRegistry.register<IConferenceState>('features/base/conference',
  * @returns {Object} The new state of the feature base/conference after the
  * reduction of the specified action.
  */
-function _authStatusChanged(state: any, { authEnabled, authLogin }: {authEnabled: boolean, authLogin: string}) {
+function _authStatusChanged(state: IConferenceState,
+        { authEnabled, authLogin }: { authEnabled: boolean, authLogin: string }) {
     return assign(state, {
         authEnabled,
         authLogin
@@ -169,7 +171,7 @@ function _authStatusChanged(state: any, { authEnabled, authLogin }: {authEnabled
  * @returns {Object} The new state of the feature base/conference after the
  * reduction of the specified action.
  */
-function _conferenceFailed(state: any, { conference, error }: {conference: Object, error: any}) {
+function _conferenceFailed(state: IConferenceState, { conference, error }: { conference: Object, error: Error }) {
     // The current (similar to getCurrentConference in
     // base/conference/functions.any.js) conference which is joining or joined:
     const conference_ = state.conference || state.joining;
@@ -235,7 +237,7 @@ function _conferenceFailed(state: any, { conference, error }: {conference: Objec
  * @returns {Object} The new state of the feature base/conference after the
  * reduction of the specified action.
  */
-function _conferenceJoined(state: any, { conference }: {conference: any}) {
+function _conferenceJoined(state: IConferenceState, { conference }: { conference: any }) {
     // FIXME The indicator which determines whether a JitsiConference is locked
     // i.e. password-protected is private to lib-jitsi-meet. However, the
     // library does not fire LOCK_STATE_CHANGED upon joining a JitsiConference
@@ -281,7 +283,8 @@ function _conferenceJoined(state: any, { conference }: {conference: any}) {
  * @returns {Object} The next/new state of the feature base/conference after the
  * reduction of the specified action.
  */
-function _conferenceLeftOrWillLeave(state: any, { conference, type }: {conference: Object, type: string}) {
+function _conferenceLeftOrWillLeave(state: IConferenceState, { conference, type }:
+    { conference: Object, type: string }) {
     const nextState = { ...state };
 
     // The redux action CONFERENCE_LEFT is the last time that we should be
@@ -293,8 +296,8 @@ function _conferenceLeftOrWillLeave(state: any, { conference, type }: {conferenc
     // due clean-up like leaving the associated room, but the instance is no
     // longer the focus of the attention of the user and, consequently, the app.
     for (const p in state) {
-        if (state[p] === conference) {
-            nextState[p] = undefined;
+        if (state[p as keyof IConferenceState] === conference) {
+            nextState[p as keyof IConferenceState] = undefined;
 
             switch (p) {
             case 'conference':
@@ -335,7 +338,7 @@ function _conferenceLeftOrWillLeave(state: any, { conference, type }: {conferenc
  * @returns {Object} The new state of the feature base/conference after the
  * reduction of the specified action.
  */
-function _conferenceWillJoin(state: any, { conference }: {conference: Object}) {
+function _conferenceWillJoin(state: IConferenceState, { conference }: { conference: Object }) {
     return assign(state, {
         error: undefined,
         joining: conference
@@ -352,7 +355,7 @@ function _conferenceWillJoin(state: any, { conference }: {conference: Object}) {
  * @returns {Object} The new state of the feature base/conference after the
  * reduction of the specified action.
  */
-function _lockStateChanged(state: any, { conference, locked }: {conference: Object, locked: boolean}) {
+function _lockStateChanged(state: IConferenceState, { conference, locked }: { conference: Object, locked: boolean }) {
     if (state.conference !== conference) {
         return state;
     }
@@ -373,7 +376,7 @@ function _lockStateChanged(state: any, { conference, locked }: {conference: Obje
  * @returns {Object} The new state of the feature base/conference after the
  * reduction of the specified action.
  */
-function _p2pStatusChanged(state: any, action: any) {
+function _p2pStatusChanged(state: IConferenceState, action: any) {
     return set(state, 'p2p', action.p2p);
 }
 
@@ -386,8 +389,8 @@ function _p2pStatusChanged(state: any, action: any) {
  * @returns {Object} The new state of the feature base/conference after the
  * reduction of the specified action.
  */
-function _setPassword(state: any, { conference, method, password }
-    : {conference: any, method: Object, password: string}) {
+function _setPassword(state: IConferenceState, { conference, method, password }
+    : { conference: any, method: Object, password: string }) {
     switch (method) {
     case conference.join:
         return assign(state, {
@@ -434,7 +437,7 @@ function _setPassword(state: any, { conference, method, password }
  * @returns {Object} The new state of the feature base/conference after the
  * reduction of the specified action.
  */
-function _setRoom(state: any, action: any) {
+function _setRoom(state: IConferenceState, action: any) {
     let { room } = action;
 
     if (!isRoomValid(room)) {

react/features/base/config/configType.ts

@@ -144,7 +144,7 @@ export interface IConfig {
     callStatsSecret?: string;
     channelLastN?: number;
     chromeExtensionBanner?: {
-        chromeExtensionsInfo?: Array<{id: string; path: string}>;
+        chromeExtensionsInfo?: Array<{ id: string; path: string }>;
         edgeUrl?: string;
         url?: string;
     };
@@ -373,7 +373,7 @@ export interface IConfig {
         iceTransportPolicy?: string;
         preferH264?: boolean;
         preferredCodec?: string;
-        stunServers?: Array<{urls: string}>;
+        stunServers?: Array<{ urls: string }>;
     };
     participantsPane?: {
         hideModeratorSettingsTab?: boolean;

react/features/base/config/reducer.ts

@@ -150,7 +150,7 @@ function _getInitialState() {
  * @private
  * @returns {Object} The new state after the reduction of the specified action.
  */
-function _setConfig(state: IConfig, { config }: {config: IConfig}) {
+function _setConfig(state: IConfig, { config }: { config: IConfig }) {
     // eslint-disable-next-line no-param-reassign
     config = _translateLegacyConfig(config);
 
@@ -457,7 +457,7 @@ function _translateLegacyConfig(oldValue: IConfig) {
  * @private
  * @returns {Object} The new state after the reduction of the specified action.
  */
-function _updateConfig(state: IConfig, { config }: {config: IConfig}) {
+function _updateConfig(state: IConfig, { config }: { config: IConfig }) {
     const newState = _.merge({}, state, config);
 
     _cleanupConfig(newState);

react/features/base/dialog/components/web/ModalHeader.tsx

@@ -14,9 +14,8 @@ import React from 'react';
 import { WithTranslation } from 'react-i18next';
 
 import { translate } from '../../../i18n/functions';
-import { IconClose } from '../../../icons/svg/index';
-// @ts-ignore
-import { withPixelLineHeight } from '../../../styles/functions';
+import { IconClose } from '../../../icons/svg';
+import { withPixelLineHeight } from '../../../styles/functions.web';
 import Button from '../../../ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../ui/constants';
 

react/features/base/environment/environment.ts

@@ -26,8 +26,7 @@ const browserNameToCheck = {
     safari: browser.isSafari.bind(browser)
 };
 
-// eslint-disable-next-line no-var
-declare var interfaceConfig: any;
+declare let interfaceConfig: any;
 
 /**
  * Returns whether or not jitsi is optimized and targeted for the  provided

react/features/base/i18n/configLanguageDetector.ts

@@ -1,6 +1,5 @@
 
-// eslint-disable-next-line no-var
-declare var config: any;
+declare let config: any;
 
 /**
  * Custom language detection, just returns the config property if any.

react/features/base/i18n/customNavigatorDetector.ts

@@ -1,6 +1,5 @@
 
-// eslint-disable-next-line no-var
-declare var navigator: any;
+declare let navigator: any;
 
 /**
  * Custom language detection, just returns the config property if any.

react/features/base/i18n/i18next.ts

@@ -1,5 +1,4 @@
-// eslint-disable-next-line no-var
-declare var APP: any;
+declare let APP: any;
 
 import COUNTRIES_RESOURCES from 'i18n-iso-countries/langs/en.json';
 import i18next from 'i18next';

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

@@ -3,8 +3,7 @@ import BrowserLanguageDetector from 'i18next-browser-languagedetector';
 import configLanguageDetector from './configLanguageDetector';
 import customNavigatorDetector from './customNavigatorDetector';
 
-// eslint-disable-next-line no-var
-declare var interfaceConfig: any;
+declare let interfaceConfig: any;
 
 /**
  * The ordered list (by name) of language detectors to be utilized as backends

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

@@ -1,9 +1,8 @@
-/* eslint-disable import/order */
+/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
 
 // @ts-ignore
 import { Container } from '../../react/base';
-
 // @ts-ignore
 import { styleTypeToObject } from '../../styles';
 

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

@@ -5,12 +5,12 @@ export type Props = {
     /**
      * An SVG icon to be rendered as the content of the label.
      */
-    icon: Function,
+    icon?: Function,
 
     /**
      * String or component that will be rendered as the label itself.
      */
-    text: string
+    text?: string
 };
 
 /**

react/features/base/label/components/web/Label.tsx

@@ -14,7 +14,7 @@ type Props = AbstractProps & {
     /**
      * Own CSS class name.
      */
-    className: string,
+    className?: string,
 
     /**
      * An object containing the CSS classes.
@@ -24,7 +24,7 @@ type Props = AbstractProps & {
     /**
      * The color of the label.
      */
-    color: string,
+    color?: string,
 
 
     /**
@@ -35,7 +35,7 @@ type Props = AbstractProps & {
     /**
      * HTML ID attribute to add to the root of {@code Label}.
      */
-    id: string,
+    id?: string,
 
     /**
      * Click handler if any.

react/features/base/lastn/reducer.ts

@@ -42,6 +42,6 @@ ReducerRegistry.register<ILastNState>('features/base/lastn', (state = {}, action
  * @private
  * @returns {Object} The new state after the reduction of the specified action.
  */
-function _setConfig(state: ILastNState, { config }: {config: IConfig}) {
+function _setConfig(state: ILastNState, { config }: { config: IConfig }) {
     return set(state, 'lastNLimits', validateLastNLimits(config.lastNLimits));
 }

react/features/base/logging/JitsiMeetInMemoryLogStorage.ts

@@ -35,7 +35,7 @@ export default class JitsiMeetInMemoryLogStorage {
      * representing log lines or aggregated lines objects.
      * @returns {void}
      */
-    storeLogs(logEntries: (string|{text: string})[]) {
+    storeLogs(logEntries: (string|{ text: string })[]) {
         for (let i = 0, len = logEntries.length; i < len; i++) {
             const logEntry = logEntries[i];
 

react/features/base/logging/middleware.ts

@@ -2,6 +2,7 @@
 // @ts-ignore
 import Logger from '@jitsi/logger';
 
+import { IStore } from '../../app/types';
 import { APP_WILL_MOUNT } from '../app/actionTypes';
 // @ts-ignore
 import { CONFERENCE_JOINED, getCurrentConference } from '../conference';
@@ -64,7 +65,7 @@ MiddlewareRegistry.register(store => next => action => {
  * @returns {Object} The new state that is the result of the reduction of the
  * specified {@code action}.
  */
-function _appWillMount({ getState }: {getState: Function}, next: Function, action: any) {
+function _appWillMount({ getState }: IStore, next: Function, action: any) {
     const { config } = getState()['features/base/logging'];
 
     _setLogLevels(Logger, config);
@@ -90,7 +91,7 @@ function _appWillMount({ getState }: {getState: Function}, next: Function, actio
  * @private
  * @returns {*}
  */
-function _conferenceJoined({ getState }: { getState: Function }, next: Function, action: any) {
+function _conferenceJoined({ getState }: IStore, next: Function, action: any) {
 
     // Wait until the joined event is processed, so that the JitsiMeetLogStorage
     // will be ready.
@@ -137,7 +138,7 @@ function _conferenceJoined({ getState }: { getState: Function }, next: Function,
  * @private
  * @returns {void}
  */
-function _initLogging({ dispatch, getState }: {dispatch: Function, getState: Function},
+function _initLogging({ dispatch, getState }: IStore,
         loggingConfig: any, isTestingEnabled: boolean) {
     const { logCollector } = getState()['features/base/logging'];
 
@@ -194,7 +195,7 @@ function _initLogging({ dispatch, getState }: {dispatch: Function, getState: Fun
  * @returns {Object} The new state that is the result of the reduction of the
  * specified {@code action}.
  */
-function _libWillInit({ getState }: { getState: Function }, next: Function, action: any) {
+function _libWillInit({ getState }: IStore, next: Function, action: any) {
     // Adding the if in order to preserve the logic for web after enabling
     // LIB_WILL_INIT action for web in initLib action.
     if (typeof APP === 'undefined') {
@@ -218,7 +219,7 @@ function _libWillInit({ getState }: { getState: Function }, next: Function, acti
  * @returns {Object} The new state that is the result of the reduction of the
  * specified action.
  */
-function _setConfig({ dispatch }: { dispatch: Function }, next: Function, action: any) {
+function _setConfig({ dispatch }: IStore, next: Function, action: any) {
     const result = next(action);
 
     dispatch(setLoggingConfig(action.config?.logging));
@@ -240,7 +241,7 @@ function _setConfig({ dispatch }: { dispatch: Function }, next: Function, action
  * @returns {Object} The new state that is the result of the reduction of the
  * specified {@code action}.
  */
-function _setLoggingConfig({ dispatch, getState }: { dispatch: Function, getState: Function },
+function _setLoggingConfig({ dispatch, getState }: IStore,
         next: Function, action: any) {
     const result = next(action);
     const newValue = getState()['features/base/logging'].config;

react/features/base/logging/reducer.ts

@@ -62,7 +62,11 @@ export interface ILoggingState {
             [key: string]: LogLevel;
         }
     };
-    logCollector?: Object;
+    logCollector?: {
+        flush: () => void;
+        start: () => void;
+        stop: () => void;
+    };
 }
 
 ReducerRegistry.register<ILoggingState>(

react/features/base/media/constants.ts

@@ -15,7 +15,7 @@ export type MediaType = 'audio' | 'video' | 'presenter' | 'screenshare';
  *
  * @enum {string}
  */
-export const MEDIA_TYPE: {[key: string]: MediaType} = {
+export const MEDIA_TYPE: { [key: string]: MediaType } = {
     AUDIO: 'audio',
     PRESENTER: 'presenter',
     SCREENSHARE: 'screenshare',

react/features/base/media/middleware.web.ts

@@ -1,18 +1,15 @@
-/* eslint-disable import/order */
+/* eslint-disable lines-around-comment */
 import './middleware.any.js';
 
 import { IStore } from '../../app/types';
-
 // @ts-ignore
-import { NOTIFICATION_TIMEOUT_TYPE, showNotification } from '../../notifications';
+import { showNotification } from '../../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../../notifications/constants';
 import LocalRecordingManager from '../../recording/components/Recording/LocalRecordingManager.web';
-
 // @ts-ignore
 import StopRecordingDialog from '../../recording/components/Recording/web/StopRecordingDialog';
-
 // @ts-ignore
 import { openDialog } from '../dialog';
-
 import MiddlewareRegistry from '../redux/MiddlewareRegistry';
 
 import { SET_VIDEO_MUTED } from './actionTypes';

react/features/base/media/reducer.ts

@@ -299,7 +299,7 @@ function _storeVideoTransform(state: IVideoState, { streamId, transform }: { str
  * @private
  * @returns {Object}
  */
-function _trackRemoved(state: IVideoState, { track: { jitsiTrack } } : {track: {jitsiTrack: any}}) {
+function _trackRemoved(state: IVideoState, { track: { jitsiTrack } } : { track: { jitsiTrack: any } }) {
     if (jitsiTrack) {
         const streamId = jitsiTrack.getStreamId();
 

react/features/base/participants/actions.ts

@@ -1,7 +1,8 @@
 import { Dispatch } from 'redux';
 
 // @ts-ignore
-import { NOTIFICATION_TIMEOUT_TYPE, showNotification } from '../../notifications';
+import { showNotification } from '../../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../../notifications/constants';
 import { set } from '../redux/functions';
 
 import {
@@ -37,7 +38,7 @@ import {
     getParticipantById
 } from './functions';
 import logger from './logger';
-import { Participant } from './reducer';
+import { Participant } from './types';
 
 /**
  * Create an action for when dominant speaker changes.

react/features/base/participants/constants.ts

@@ -1,4 +1,4 @@
-import { IconPhone } from '../icons/svg/index';
+import { IconPhone } from '../icons/svg';
 
 /**
  * The relative path to the default/stock avatar (image) file used on both

react/features/base/participants/functions.ts

@@ -22,7 +22,7 @@ import { createDeferred } from '../util/helpers';
 import { JIGASI_PARTICIPANT_ICON, MAX_DISPLAY_NAME_LENGTH, PARTICIPANT_ROLE } from './constants';
 // @ts-ignore
 import { preloadImage } from './preloadImage';
-import { Participant } from './reducer';
+import { Participant } from './types';
 
 /**
  * Temp structures for avatar urls to be checked/preloaded.

react/features/base/participants/reducer.ts

@@ -18,8 +18,8 @@ import {
     SET_LOADABLE_AVATAR_URL
 } from './actionTypes';
 import { LOCAL_PARTICIPANT_DEFAULT_ID, PARTICIPANT_ROLE } from './constants';
-// @ts-ignore
 import { isParticipantModerator } from './functions';
+import { LocalParticipant, Participant } from './types';
 
 /**
  * Participant object.
@@ -38,45 +38,6 @@ import { isParticipantModerator } from './functions';
  * @property {string} email - Participant email.
  */
 
-export interface Participant {
-    avatarURL?: string;
-    botType?: string;
-    conference?: Object;
-    connectionStatus?: string;
-    dominantSpeaker?: boolean;
-    e2eeSupported?: boolean;
-    email?: string;
-    features?: {
-        'screen-sharing'?: boolean;
-    };
-    id: string;
-    isFakeParticipant?: boolean;
-    isJigasi?: boolean;
-    isLocalScreenShare?: boolean;
-    isReplacing?: number;
-    isVirtualScreenshareParticipant?: boolean;
-    loadableAvatarUrl?: string;
-    loadableAvatarUrlUseCORS?: boolean;
-    local?: boolean;
-    name?: string;
-    pinned?: boolean;
-    presence?: string;
-    raisedHandTimestamp?: number;
-    remoteControlSessionStatus?: boolean;
-    role?: string;
-    supportsRemoteControl?: boolean;
-}
-
-export interface LocalParticipant extends Participant {
-    audioOutputDeviceId?: string;
-    cameraDeviceId?: string;
-    micDeviceId?: string;
-    startWithAudioMuted?: boolean;
-    startWithVideoMuted?: boolean;
-    userSelectedMicDeviceId?: string;
-    userSelectedMicDeviceLabel?: string;
-}
-
 /**
  * The participant properties which cannot be updated through
  * {@link PARTICIPANT_UPDATED}. They either identify the participant or can only
@@ -121,7 +82,7 @@ export interface IParticipantsState {
     localScreenShare?: Participant;
     overwrittenNameList: Object;
     pinnedParticipant?: string;
-    raisedHandsQueue: Array<{ id: string; raisedHandTimestamp: number;}>;
+    raisedHandsQueue: Array<{ id: string; raisedHandTimestamp: number; }>;
     remote: Map<string, Participant>;
     sortedRemoteParticipants: Map<string, string>;
     sortedRemoteScreenshares: Map<string, string>;
@@ -505,9 +466,7 @@ function _isEveryoneModerator(state: IParticipantsState) {
  * @private
  * @returns {Participant}
  */
-function _participant(state: Participant|LocalParticipant = {
-    id: '',
-    name: '' }, action: any): Participant|LocalParticipant {
+function _participant(state: Participant|LocalParticipant = { id: '' }, action: any): Participant|LocalParticipant {
     switch (action.type) {
     case SET_LOADABLE_AVATAR_URL:
     case PARTICIPANT_UPDATED: {
@@ -543,7 +502,7 @@ function _participant(state: Participant|LocalParticipant = {
  * base/participants after the reduction of the specified
  * {@code action}.
  */
-function _participantJoined({ participant }: {participant: Participant}) {
+function _participantJoined({ participant }: { participant: Participant }) {
     const {
         avatarURL,
         botType,

react/features/base/participants/types.ts

@@ -0,0 +1,38 @@
+export interface Participant {
+    avatarURL?: string;
+    botType?: string;
+    conference?: Object;
+    connectionStatus?: string;
+    dominantSpeaker?: boolean;
+    e2eeSupported?: boolean;
+    email?: string;
+    features?: {
+        'screen-sharing'?: boolean;
+    };
+    id: string;
+    isFakeParticipant?: boolean;
+    isJigasi?: boolean;
+    isLocalScreenShare?: boolean;
+    isReplacing?: number;
+    isVirtualScreenshareParticipant?: boolean;
+    loadableAvatarUrl?: string;
+    loadableAvatarUrlUseCORS?: boolean;
+    local?: boolean;
+    name?: string;
+    pinned?: boolean;
+    presence?: string;
+    raisedHandTimestamp?: number;
+    remoteControlSessionStatus?: boolean;
+    role?: string;
+    supportsRemoteControl?: boolean;
+}
+
+export interface LocalParticipant extends Participant {
+    audioOutputDeviceId?: string;
+    cameraDeviceId?: string;
+    micDeviceId?: string;
+    startWithAudioMuted?: boolean;
+    startWithVideoMuted?: boolean;
+    userSelectedMicDeviceId?: string;
+    userSelectedMicDeviceLabel?: string;
+}

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

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import React, { ReactNode, useCallback } from 'react';
 
 import Icon from '../../../icons/components/Icon';
-import { IconArrowDown } from '../../../icons/svg/index';
+import { IconArrowDown } from '../../../icons/svg';
 import { withPixelLineHeight } from '../../../styles/functions.web';
 
 type Props = {

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

@@ -6,11 +6,9 @@ import { WithTranslation } from 'react-i18next';
 import { IState } from '../../../../app/types';
 import { translate } from '../../../i18n/functions';
 import Icon from '../../../icons/components/Icon';
-import { IconArrowDownSmall, IconWifi1Bar, IconWifi2Bars, IconWifi3Bars } from '../../../icons/svg/index';
+import { IconArrowDownSmall, IconWifi1Bar, IconWifi2Bars, IconWifi3Bars } from '../../../icons/svg';
 import { connect } from '../../../redux/functions';
-// @ts-ignore
 import { PREJOIN_DEFAULT_CONTENT_WIDTH } from '../../../ui/components/variables';
-// @ts-ignore
 import { CONNECTION_TYPE } from '../../constants';
 // @ts-ignore
 import { getConnectionData } from '../../functions';
@@ -121,7 +119,13 @@ const useStyles = makeStyles((theme: any) => {
     };
 });
 
-const CONNECTION_TYPE_MAP: any = {
+const CONNECTION_TYPE_MAP: {
+    [key: string]: {
+        connectionClass: string;
+        connectionText: string;
+        icon: Function;
+    }
+} = {
     [CONNECTION_TYPE.POOR]: {
         connectionClass: 'con-status--poor',
         icon: IconWifi1Bar,

react/features/base/premeeting/constants.ts

@@ -1,5 +1,3 @@
-// @flow
-
 export const CONNECTION_TYPE = {
     GOOD: 'good',
     NON_OPTIMAL: 'nonOptimal',

react/features/base/react/components/native/IconButton.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { TouchableRipple } from 'react-native-paper';
 
 import Icon from '../../../icons/components/Icon';
-// @ts-ignore
 import BaseTheme from '../../../ui/components/BaseTheme.native';
 import { BUTTON_TYPES } from '../../../ui/constants';
 import { IconButtonProps } from '../../types';

react/features/base/redux/PersistenceRegistry.ts

@@ -1,12 +1,10 @@
-/* eslint-disable import/order */
 // @ts-ignore
 import Bourne from '@hapi/bourne';
-
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { jitsiLocalStorage } from '@jitsi/js-utils';
 import md5 from 'js-md5';
 
-// @ts-ignore
 import logger from './logger';
 
 declare let __DEV__: any;
@@ -29,7 +27,7 @@ declare type PersistencyConfigMap = { [name: string]: ElementConfig };
  */
 class PersistenceRegistry {
     _checksum = '';
-    _defaultStates: { [name: string ]: Object|undefined} = {};
+    _defaultStates: { [name: string ]: Object|undefined } = {};
     _elements: PersistencyConfigMap = {};
 
     /**

react/features/base/redux/StateListenerRegistry.ts

@@ -1,9 +1,6 @@
-/* eslint-disable import/order */
 import { Store } from 'redux';
 
 import { equals } from './functions';
-
-// @ts-ignore
 import logger from './logger';
 
 /**

react/features/base/redux/logger.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import { getLogger } from '../logging/functions';
 
 export default getLogger('features/base/redux');

react/features/base/settings/components/native/SettingsButton.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable lines-around-comment */
 import { translate } from '../../../../base/i18n/functions';
-// @ts-ignore
-import { IconSettings } from '../../../../base/icons';
+import { IconSettings } from '../../../../base/icons/svg';
 // @ts-ignore
 import { AbstractButton, type AbstractButtonProps } from '../../../../base/toolbox/components';
 // @ts-ignore

react/features/base/ui/components/native/Input.tsx

@@ -12,8 +12,6 @@ import {
 
 import Icon from '../../../icons/components/Icon';
 import { IconCloseCircle } from '../../../icons/svg';
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
 import BaseTheme from '../../../ui/components/BaseTheme.native';
 import { InputProps } from '../types';
 

react/features/base/ui/components/native/buttonStyles.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import BaseTheme from '../../../ui/components/BaseTheme.native';
 
 const BUTTON_HEIGHT = BaseTheme.spacing[7];

react/features/base/ui/components/native/inputStyles.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import BaseTheme from '../../../ui/components/BaseTheme.native';
 
 export default {

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

@@ -6,8 +6,6 @@ import { isMobileBrowser } from '../../../environment/utils';
 import Icon from '../../../icons/components/Icon';
 import { IconCheckMark } from '../../../icons/svg';
 import { withPixelLineHeight } from '../../../styles/functions.web';
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
 import BaseTheme from '../BaseTheme.web';
 
 interface CheckboxProps {

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

@@ -5,7 +5,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 
 import { isMobileBrowser } from '../../../environment/utils';
 import Icon from '../../../icons/components/Icon';
-import { IconCloseCircle } from '../../../icons/svg/index';
+import { IconCloseCircle } from '../../../icons/svg';
 import { withPixelLineHeight } from '../../../styles/functions.web';
 import { Theme } from '../../../ui/types';
 import { InputProps } from '../types';

react/features/base/user-interaction/middleware.ts

@@ -56,7 +56,7 @@ function _onUserInteractionReceived(dispatch: Function, event: any) {
  * @private
  * @returns {void}
  */
-function _startListeningForUserInteraction({ dispatch }: {dispatch: Function}) {
+function _startListeningForUserInteraction({ dispatch }: { dispatch: Function }) {
     _stopListeningForUserInteraction();
 
     userInteractionListener = _onUserInteractionReceived.bind(null, dispatch);

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

@@ -1,5 +1,4 @@
-// eslint-disable-next-line no-var
-declare var JitsiMeetJS: any;
+declare let JitsiMeetJS: any;
 
 /**
  * Loads a script from a specific URL. The script will be interpreted upon load.

react/features/base/util/uri.ts

@@ -221,7 +221,7 @@ function _objectToURLParamsArray(obj = {}) {
 export function parseStandardURIString(str: string) {
     /* eslint-disable no-param-reassign */
 
-    const obj: {[key: string]: any} = {
+    const obj: { [key: string]: any } = {
         toString: _standardURIToString
     };
 
@@ -452,7 +452,7 @@ export function toURLString(obj?: (Object | string)): string|undefined|null {
  * @returns {string} - A {@code String} representation of the specified
  * {@code Object}.
  */
-export function urlObjectToString(o: {[key: string]: any}): string|undefined {
+export function urlObjectToString(o: { [key: string]: any }): string|undefined {
     // First normalize the given url. It come as o.url or split into o.serverURL
     // and o.room.
     let tmp;

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

@@ -6,7 +6,7 @@ import type { Dispatch } from 'redux';
 import { IState } from '../../../app/types';
 import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n/functions';
-import { IconPlane, IconSmile } from '../../../base/icons/svg/index';
+import { IconPlane, IconSmile } from '../../../base/icons/svg';
 import { connect } from '../../../base/redux/functions';
 import Button from '../../../base/ui/components/web/Button';
 import Input from '../../../base/ui/components/web/Input';

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

@@ -3,7 +3,6 @@ import throttle from 'lodash/throttle';
 import React, { RefObject } from 'react';
 import { scrollIntoView } from 'seamless-scroll-polyfill';
 
-// @ts-ignore
 import { MESSAGE_TYPE_REMOTE } from '../../constants';
 import AbstractMessageContainer, { Props } from '../AbstractMessageContainer';
 

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

@@ -4,7 +4,7 @@ import { WithTranslation } from 'react-i18next';
 
 import { translate } from '../../../base/i18n/functions';
 import Icon from '../../../base/icons/components/Icon';
-import { IconArrowDown } from '../../../base/icons/svg/index';
+import { IconArrowDown } from '../../../base/icons/svg';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 
 export interface INewMessagesButtonProps extends WithTranslation {

react/features/chat/reducer.ts

@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
 
-import { LocalParticipant, Participant } from '../base/participants/reducer';
+import { LocalParticipant, Participant } from '../base/participants/types';
 import ReducerRegistry from '../base/redux/ReducerRegistry';
 
 import {

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

@@ -2,8 +2,7 @@
 import React from 'react';
 
 import Icon from '../../../../base/icons/components/Icon';
-import { IconVolumeEmpty } from '../../../../base/icons/svg/index';
-// @ts-ignore
+import { IconVolumeEmpty } from '../../../../base/icons/svg';
 import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
 
 /**

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

@@ -1,9 +1,7 @@
-/* eslint-disable lines-around-comment */
 import React from 'react';
 
 import Icon from '../../../../base/icons/components/Icon';
-import { IconHangup } from '../../../../base/icons/svg/index';
-// @ts-ignore
+import { IconHangup } from '../../../../base/icons/svg';
 import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
 
 /**

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

@@ -14,7 +14,7 @@ import { IState } from '../../../../app/types';
 // @ts-ignore
 import { getFeatureFlag, AUDIO_MUTE_BUTTON_ENABLED } from '../../../../base/flags';
 import Icon from '../../../../base/icons/components/Icon';
-import { IconMicrophone, IconMicrophoneEmptySlash } from '../../../../base/icons/svg/index';
+import { IconMicrophone, IconMicrophoneEmptySlash } from '../../../../base/icons/svg';
 import { MEDIA_TYPE } from '../../../../base/media/constants';
 // @ts-ignore
 import { isLocalTrackMuted } from '../../../../base/tracks';

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

@@ -45,7 +45,7 @@ type Props = {
  * @returns {JSX.Element}
  */
 const TitleBar = (props: Props) : JSX.Element => {
-    const localParticipant: any = useSelector(getLocalParticipant);
+    const localParticipant = useSelector(getLocalParticipant);
     const localParticipantId = localParticipant?.id;
 
     return (<>

react/features/conference/components/web/RaisedHandsCountLabel.tsx

@@ -5,9 +5,8 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { IState } from '../../../app/types';
-import { IconRaisedHand } from '../../../base/icons/svg/index';
-// @ts-ignore
-import { Label } from '../../../base/label';
+import { IconRaisedHand } from '../../../base/icons/svg';
+import Label from '../../../base/label/components/web/Label';
 // @ts-ignore
 import { Tooltip } from '../../../base/tooltip';
 import BaseTheme from '../../../base/ui/components/BaseTheme.web';

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

@@ -67,11 +67,11 @@ class DisplayNameLabel extends React.Component<Props> {
  * @param {Props} ownProps - The own props of the component.
  * @returns {Props}
  */
-function _mapStateToProps(state: IState, ownProps: any) {
-    const participant = getParticipantById(state, ownProps.participantId);
+function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
+    const participant = getParticipantById(state, ownProps.participantId ?? '');
 
     return {
-        _participantName: getParticipantDisplayName(state, ownProps.participantId),
+        _participantName: getParticipantDisplayName(state, ownProps.participantId ?? ''),
         _render: participant && (!participant?.local || ownProps.contained) && !participant?.isFakeParticipant
     };
 }

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

@@ -8,7 +8,7 @@ import { IState } from '../../../app/types';
 // @ts-ignore
 import { isDisplayNameVisible } from '../../../base/config/functions.any';
 import { getLocalParticipant, getParticipantDisplayName } from '../../../base/participants/functions';
-import { Participant } from '../../../base/participants/reducer';
+import { Participant } from '../../../base/participants/types';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 // @ts-ignore
 import { getLargeVideoParticipant } from '../../../large-video/functions';

react/features/dynamic-branding/components/native/BrandingImageBackground.tsx

@@ -9,7 +9,7 @@ import styles from './styles';
 
 
 interface Props {
-    uri?: any;
+    uri?: string;
 }
 
 /**
@@ -18,7 +18,7 @@ interface Props {
  * @param {Props} props - The props of the component.
  * @returns {ReactElement}
  */
-const BrandingImageBackground: React.FC<Props> = ({ uri }:Props) => {
+const BrandingImageBackground: React.FC<Props> = ({ uri }: Props) => {
     const imageType = uri?.substr(uri.lastIndexOf('/') + 1);
     const imgSrc = uri ? uri : undefined;
 
@@ -41,7 +41,7 @@ const BrandingImageBackground: React.FC<Props> = ({ uri }:Props) => {
                     // with the smallest Y value of the viewport.
                     preserveAspectRatio = 'xMinYMin'
                     style = { styles.brandingImageBackgroundSvg as StyleProp<ViewStyle> }
-                    uri = { imgSrc }
+                    uri = { imgSrc ?? null }
                     viewBox = '0 0 400 650'
                     width = '100%' />
             );

react/features/dynamic-branding/reducer.ts

@@ -228,7 +228,7 @@ ReducerRegistry.register<IDynamicBrandingState>(STORE_NAME, (state = DEFAULT_STA
  * @private
  * @returns {{Props}}
  */
-function formatImages(images: Array<string> | Array<{src: string; tooltip?: string}>): Array<Image> {
+function formatImages(images: Array<string> | Array<{ src: string; tooltip?: string }>): Array<Image> {
     return images.map((img, i) => {
         let src;
         let tooltip;

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

@@ -19,8 +19,8 @@ import { getSourceNameSignalingFeatureFlag, getToolbarButtons } from '../../../b
 import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n/functions';
 import Icon from '../../../base/icons/components/Icon';
-import { IconMenuDown, IconMenuUp } from '../../../base/icons/svg/index';
-import { Participant } from '../../../base/participants/reducer';
+import { IconMenuDown, IconMenuUp } from '../../../base/icons/svg';
+import { Participant } from '../../../base/participants/types';
 import { connect } from '../../../base/redux/functions';
 // @ts-ignore
 import { shouldHideSelfView } from '../../../base/settings/functions.any';
@@ -611,7 +611,7 @@ class Filmstrip extends PureComponent <Props, State> {
      * @param {Object} data - An object with the indexes identifying the ThumbnailWrapper instance.
      * @returns {string} - The key.
      */
-    _gridItemKey({ columnIndex, rowIndex }: {columnIndex: number, rowIndex: number}) {
+    _gridItemKey({ columnIndex, rowIndex }: { columnIndex: number, rowIndex: number }) {
         const {
             _disableSelfView,
             _columns,
@@ -887,7 +887,7 @@ class Filmstrip extends PureComponent <Props, State> {
  * @private
  * @returns {Props}
  */
-function _mapStateToProps(state: IState, ownProps: any) {
+function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
     const { _hasScroll = false, filmstripType, _topPanelFilmstrip, _remoteParticipants } = ownProps;
     const toolbarButtons = getToolbarButtons(state);
     const { testing = {}, iAmRecorder } = state['features/base/config'];
@@ -935,7 +935,7 @@ function _mapStateToProps(state: IState, ownProps: any) {
         _mainFilmstripVisible: visible,
         _maxFilmstripWidth: clientWidth - MIN_STAGE_VIEW_WIDTH,
         _maxTopPanelHeight: clientHeight - MIN_STAGE_VIEW_HEIGHT,
-        _remoteParticipantsLength: _remoteParticipants.length,
+        _remoteParticipantsLength: _remoteParticipants?.length,
         _thumbnailsReordered: enableThumbnailReordering,
         _topPanelHeight: topPanelHeight.current,
         _topPanelMaxHeight: topPanelHeight.current || TOP_FILMSTRIP_HEIGHT,

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 
 import { IState } from '../../../app/types';
-import { IconPinParticipant } from '../../../base/icons/svg/index';
+import { IconPinParticipant } from '../../../base/icons/svg';
 import { getParticipantById } from '../../../base/participants/functions';
 import BaseIndicator from '../../../base/react/components/web/BaseIndicator';
 // eslint-disable-next-line lines-around-comment
@@ -57,7 +57,7 @@ const PinnedIndicator = ({
 }: Props) => {
     const stageFilmstrip = useSelector(isStageFilmstripAvailable);
     const pinned = useSelector((state: IState) => getParticipantById(state, participantId))?.pinned;
-    const activePinnedParticipants: Array<{participantId: string; pinned: boolean}>
+    const activePinnedParticipants: Array<{ participantId: string; pinned: boolean }>
         = useSelector(getPinnedActiveParticipants);
     const isPinned = activePinnedParticipants.find(p => p.participantId === participantId);
     const styles = useStyles();

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

@@ -3,9 +3,9 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 
 import { IState } from '../../../app/types';
-import { IconRaisedHand } from '../../../base/icons/svg/index';
+import { IconRaisedHand } from '../../../base/icons/svg';
 import { getParticipantById, hasRaisedHand } from '../../../base/participants/functions';
-import { Participant } from '../../../base/participants/reducer';
+import { Participant } from '../../../base/participants/types';
 import BaseIndicator from '../../../base/react/components/web/BaseIndicator';
 import BaseTheme from '../../../base/ui/components/BaseTheme.web';
 

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

@@ -22,7 +22,7 @@ import {
     getParticipantByIdOrUndefined,
     hasRaisedHand
 } from '../../../base/participants/functions';
-import { Participant } from '../../../base/participants/reducer';
+import { Participant } from '../../../base/participants/types';
 import { connect } from '../../../base/redux/functions';
 import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
 // @ts-ignore

react/features/large-video/components/ScreenSharePlaceholder.web.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable lines-around-comment */
 import { makeStyles, createStyles } from '@material-ui/core';
 import React, { useCallback } from 'react';
+import { WithTranslation } from 'react-i18next';
 import { useStore } from 'react-redux';
 
-// @ts-ignore
-import { translate } from '../../base/i18n';
+import { translate } from '../../base/i18n/functions';
 import { Theme } from '../../base/ui/types';
 // @ts-ignore
 import { setSeeWhatIsBeingShared } from '../actions.web';
@@ -72,7 +72,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
  *
  * @returns {ReactElement}
  */
-const ScreenSharePlaceholder: React.FC<{ t: Function }> = ({ t }) => {
+const ScreenSharePlaceholder: React.FC<WithTranslation> = ({ t }) => {
     const classes = useStyles();
     const store = useStore();
 

react/features/lobby/reducer.ts

@@ -1,6 +1,6 @@
 // @ts-ignore
 import { CONFERENCE_JOINED, CONFERENCE_LEFT, SET_PASSWORD } from '../base/conference';
-import { Participant } from '../base/participants/reducer';
+import { Participant } from '../base/participants/types';
 import ReducerRegistry from '../base/redux/ReducerRegistry';
 
 import {

react/features/noise-suppression/actions.ts

@@ -4,8 +4,8 @@ import { Dispatch } from 'redux';
 // @ts-ignore
 import { getLocalJitsiAudioTrack } from '../base/tracks';
 // @ts-ignore
-import { NOTIFICATION_TIMEOUT_TYPE, showErrorNotification } from '../notifications';
-// @ts-ignore
+import { showErrorNotification } from '../notifications';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
 import { NoiseSuppressionEffect } from '../stream-effects/noise-suppression/NoiseSuppressionEffect';
 
 import { SET_NOISE_SUPPRESSION_ENABLED } from './actionTypes';

react/features/noise-suppression/components/NoiseSuppressionButton.tsx

@@ -4,7 +4,7 @@ import { translate } from '../../base/i18n/functions';
 import {
     IconNoiseSuppressionOn,
     IconNoiseSuppressionOff
-} from '../../base/icons/svg/index';
+} from '../../base/icons/svg';
 import { connect } from '../../base/redux/functions';
 import {
     AbstractButton,

react/features/noise-suppression/functions.ts

@@ -1,7 +1,8 @@
 /* eslint-disable lines-around-comment */
 import { IState } from '../app/types';
 // @ts-ignore
-import { NOTIFICATION_TIMEOUT_TYPE, showWarningNotification } from '../notifications';
+import { showWarningNotification } from '../notifications';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
 // @ts-ignore
 import { isScreenAudioShared } from '../screen-share';
 

react/features/noise-suppression/logger.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import { getLogger } from '../base/logging/functions';
 
 export default getLogger('features/noise-suppression');

react/features/overlay/reducer.ts

@@ -55,7 +55,7 @@ ReducerRegistry.register<IOverlayState>('features/overlay', (state = {}, action)
  */
 function _mediaPermissionPromptVisibilityChanged(
         state: IOverlayState,
-        { browser, isVisible }: {browser?: string, isVisible?: boolean}) {
+        { browser, isVisible }: { browser?: string, isVisible?: boolean }) {
     return assign(state, {
         browser,
         isMediaPermissionPromptVisible: isVisible
@@ -74,7 +74,7 @@ function _mediaPermissionPromptVisibilityChanged(
  */
 function _toggleSlowGUMOverlay(
         state: IOverlayState,
-        { isVisible }: {isVisible?: boolean}) {
+        { isVisible }: { isVisible?: boolean }) {
     return assign(state, {
         isSlowGUMOverlayVisible: isVisible
     });
@@ -102,6 +102,6 @@ function _setShowLoadConfigOverlay(state: IOverlayState, show?: boolean) {
  * @returns {Object}
  * @private
  */
-function _setFatalError(state: IOverlayState, { fatalError }: {fatalError?: Error}) {
+function _setFatalError(state: IOverlayState, { fatalError }: { fatalError?: Error }) {
     return set(state, 'fatalError', fatalError);
 }

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

@@ -6,19 +6,16 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
 import { IState } from '../../../../../app/types';
-// @ts-ignore
-import { ListItem } from '../../../../../base/components';
+import ListItem from '../../../../../base/components/participants-pane-list/ListItem';
 import Icon from '../../../../../base/icons/components/Icon';
-import { IconArrowDown, IconArrowUp } from '../../../../../base/icons/svg/index';
+import { IconArrowDown, IconArrowUp } from '../../../../../base/icons/svg';
 import { isLocalParticipantModerator } from '../../../../../base/participants/functions';
 // @ts-ignore
 import { showOverflowDrawer } from '../../../../../toolbox/functions.web';
-// @ts-ignore
 import { ACTION_TRIGGER } from '../../../../constants';
 // @ts-ignore
 import { participantMatchesSearch } from '../../../../functions';
 import ParticipantActionEllipsis from '../../../web/ParticipantActionEllipsis';
-// @ts-ignore
 import ParticipantItem from '../../../web/ParticipantItem';
 
 type Props = {
@@ -41,7 +38,7 @@ type Props = {
     /**
      * Callback for when the mouse leaves this component.
      */
-    onLeave?: Function,
+    onLeave?: (e?: React.MouseEvent) => void,
 
     /**
      * Callback to raise menu. Used to raise menu on mobile long press.
@@ -135,7 +132,7 @@ export const CollapsibleRoom = ({
         onRaiseMenu(target);
     }, [ onRaiseMenu ]);
     const { defaultRemoteDisplayName } = useSelector((state: IState) => state['features/base/config']);
-    const overflowDrawer = useSelector(showOverflowDrawer);
+    const overflowDrawer: boolean = useSelector(showOverflowDrawer);
     const moderator = useSelector(isLocalParticipantModerator);
 
     const arrow = (<div className = { styles.arrowContainer }>

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { IconHorizontalPoints } from '../../../../../base/icons/svg/index';
+import { IconHorizontalPoints } from '../../../../../base/icons/svg';
 import Button from '../../../../../base/ui/components/web/Button';
 
 type Props = {

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

@@ -1,4 +1,4 @@
-/* eslint-disable import/order */
+/* eslint-disable lines-around-comment */
 import { makeStyles } from '@material-ui/core';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -6,22 +6,16 @@ import { useSelector } from 'react-redux';
 
 // @ts-ignore
 import { Avatar } from '../../../../../base/avatar';
-
 // @ts-ignore
 import { ContextMenu, ContextMenuItemGroup } from '../../../../../base/components';
 import { isLocalParticipantModerator } from '../../../../../base/participants/functions';
 import { Theme } from '../../../../../base/ui/types';
-
 // @ts-ignore
 import { getBreakoutRooms } from '../../../../../breakout-rooms/functions';
-
 // @ts-ignore
 import { showOverflowDrawer } from '../../../../../toolbox/functions.web';
-
 // @ts-ignore
 import SendToRoomButton from '../../../../../video-menu/components/web/SendToRoomButton';
-
-// @ts-ignore
 import { AVATAR_SIZE } from '../../../../constants';
 
 type Props = {

react/features/participants-pane/components/native/ParticipantsPaneFooter.tsx

@@ -5,7 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 // @ts-ignore
 import { openDialog, openSheet } from '../../../base/dialog';
-import { IconHorizontalPoints } from '../../../base/icons/svg/index';
+import { IconHorizontalPoints } from '../../../base/icons/svg';
 import IconButton from '../../../base/react/components/native/IconButton';
 import Button from '../../../base/ui/components/native/Button';
 import { BUTTON_TYPES } from '../../../base/ui/constants';

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

@@ -16,8 +16,8 @@ import {
     isSupported as isAvModerationSupported
     // @ts-ignore
 } from '../../../av-moderation/functions';
-// @ts-ignore
-import { ContextMenu, ContextMenuItemGroup } from '../../../base/components';
+import ContextMenu from '../../../base/components/context-menu/ContextMenu';
+import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
 // @ts-ignore
 import { openDialog } from '../../../base/dialog';
 import {
@@ -80,12 +80,12 @@ type Props = {
     /**
      * Drawer close callback.
      */
-    onDrawerClose: Function,
+    onDrawerClose: (e?: React.MouseEvent) => void,
 
     /**
      * Callback for the mouse leaving this item.
      */
-    onMouseLeave?: Function
+    onMouseLeave?: (e?: React.MouseEvent) => void
 };
 
 export const FooterContextMenu = ({ isOpen, onDrawerClose, onMouseLeave }: Props) => {

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

@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 
 // @ts-ignore
 import { createToolbarEvent, sendAnalytics } from '../../../analytics';
-import { IconInviteMore } from '../../../base/icons/svg/index';
+import { IconInviteMore } from '../../../base/icons/svg';
 import Button from '../../../base/ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../base/ui/constants';
 // @ts-ignore

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

@@ -4,21 +4,19 @@ import React, { useCallback, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-// @ts-ignore
-import { ContextMenu, ContextMenuItemGroup } from '../../../base/components';
-import { IconChat, IconCloseCircle, IconHorizontalPoints } from '../../../base/icons/svg/index';
+import ContextMenu from '../../../base/components/context-menu/ContextMenu';
+import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
+import { IconChat, IconCloseCircle, IconHorizontalPoints } from '../../../base/icons/svg';
 import { hasRaisedHand } from '../../../base/participants/functions';
-import { Participant } from '../../../base/participants/reducer';
+import { Participant } from '../../../base/participants/types';
 import Button from '../../../base/ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../base/ui/constants';
 // @ts-ignore
 import { showLobbyChatButton } from '../../../lobby/functions';
-// @ts-ignore
 import { ACTION_TRIGGER, MEDIA_STATE } from '../../constants';
 // @ts-ignore
 import { useLobbyActions } from '../../hooks';
 
-// @ts-ignore
 import ParticipantItem from './ParticipantItem';
 
 type Props = {

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

@@ -7,7 +7,7 @@ import { useSelector, useDispatch } from 'react-redux';
 // @ts-ignore
 import { Avatar } from '../../../base/avatar';
 import Icon from '../../../base/icons/components/Icon';
-import { IconCheck, IconClose } from '../../../base/icons/svg/index';
+import { IconCheck, IconClose } from '../../../base/icons/svg';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 // @ts-ignore
 import { admitMultiple } from '../../../lobby/actions.web';

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

@@ -58,7 +58,7 @@ const useStyles = makeStyles((theme: any) => {
 });
 
 type Props = {
-    currentRoom?: {name: string},
+    currentRoom?: { name: string },
     overflowDrawer?: boolean,
     participantsCount?: number,
     searchString: string,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { IconHorizontalPoints } from '../../../base/icons/svg/index';
+import { IconHorizontalPoints } from '../../../base/icons/svg';
 import Button from '../../../base/ui/components/web/Button';
 
 type Props = {

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

@@ -5,10 +5,8 @@ import { WithTranslation } from 'react-i18next';
 
 // @ts-ignore
 import { Avatar } from '../../../base/avatar';
-// @ts-ignore
-import { ListItem } from '../../../base/components';
-// @ts-ignore
-import { translate } from '../../../base/i18n';
+import ListItem from '../../../base/components/participants-pane-list/ListItem';
+import { translate } from '../../../base/i18n/functions';
 import {
     ACTION_TRIGGER,
     AudioStateIcons,
@@ -16,10 +14,8 @@ import {
     type ActionTrigger,
     type MediaState,
     VideoStateIcons
-    // @ts-ignore
 } from '../../constants';
 
-// @ts-ignore
 import { RaisedHandIndicator } from './RaisedHandIndicator';
 
 interface Props extends WithTranslation {
@@ -37,17 +33,17 @@ interface Props extends WithTranslation {
     /**
      * React children.
      */
-    children?: ReactElement,
+    children?: ReactElement|boolean,
 
     /**
      * Whether or not to disable the moderator indicator.
      */
-    disableModeratorIndicator: boolean,
+    disableModeratorIndicator?: boolean,
 
     /**
      * The name of the participant. Used for showing lobby names.
      */
-    displayName: string,
+    displayName?: string,
 
     /**
      * Is this item highlighted/raised.
@@ -57,17 +53,17 @@ interface Props extends WithTranslation {
     /**
      * Whether or not the participant is a moderator.
      */
-    isModerator: boolean,
+    isModerator?: boolean,
 
     /**
      * True if the participant is local.
      */
-    local: boolean,
+    local?: boolean,
 
     /**
      * Callback for when the mouse leaves this component.
      */
-    onLeave?: Function,
+    onLeave?: (e?: React.MouseEvent) => void,
 
     /**
      * Opens a drawer with participant actions.

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

@@ -8,7 +8,6 @@ import { useDispatch } from 'react-redux';
 import { approveParticipant } from '../../../av-moderation/actions';
 import Button from '../../../base/ui/components/web/Button';
 import { Theme } from '../../../base/ui/types';
-// @ts-ignore
 import { QUICK_ACTION_BUTTON } from '../../constants';
 
 type Props = {

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

@@ -8,7 +8,7 @@ import participantsPaneTheme from '../../../base/components/themes/participantsP
 // @ts-ignore
 import { openDialog } from '../../../base/dialog';
 import { translate } from '../../../base/i18n/functions';
-import { IconClose, IconHorizontalPoints } from '../../../base/icons/svg/index';
+import { IconClose, IconHorizontalPoints } from '../../../base/icons/svg';
 // @ts-ignore
 import { isLocalParticipantModerator } from '../../../base/participants/functions';
 import { connect } from '../../../base/redux/functions';
@@ -29,16 +29,12 @@ import {
     isMuteAllVisible
     // @ts-ignore
 } from '../../functions';
-// @ts-ignore
 import { AddBreakoutRoomButton } from '../breakout-rooms/components/web/AddBreakoutRoomButton';
 // @ts-ignore
 import { RoomList } from '../breakout-rooms/components/web/RoomList';
 
-// @ts-ignore
 import { FooterContextMenu } from './FooterContextMenu';
-// @ts-ignore
 import LobbyParticipants from './LobbyParticipants';
-// @ts-ignore
 import MeetingParticipants from './MeetingParticipants';
 
 /**

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

@@ -2,7 +2,7 @@ import { makeStyles } from '@material-ui/styles';
 import React from 'react';
 
 import Icon from '../../../base/icons/components/Icon';
-import { IconRaisedHandHollow } from '../../../base/icons/svg/index';
+import { IconRaisedHandHollow } from '../../../base/icons/svg';
 import BaseTheme from '../../../base/ui/components/BaseTheme.web';
 
 const useStyles = makeStyles((theme: any) => {

react/features/participants-pane/constants.tsx

@@ -18,7 +18,7 @@ export type ActionTrigger = 'Hover' | 'Permanent'
 /**
  * Enum of possible participant action triggers.
  */
-export const ACTION_TRIGGER: {HOVER: ActionTrigger, PERMANENT: ActionTrigger} = {
+export const ACTION_TRIGGER: { HOVER: ActionTrigger, PERMANENT: ActionTrigger } = {
     HOVER: 'Hover',
     PERMANENT: 'Permanent'
 };

react/features/polls/components/web/PollAnswer.tsx

@@ -8,10 +8,7 @@ import { BUTTON_TYPES } from '../../../base/ui/constants';
 import { Theme } from '../../../base/ui/types';
 // @ts-ignore
 import { isSubmitAnswerDisabled } from '../../functions';
-// @ts-ignore
-import AbstractPollAnswer from '../AbstractPollAnswer';
-// @ts-ignore
-import type { AbstractProps } from '../AbstractPollAnswer';
+import AbstractPollAnswer, { AbstractProps } from '../AbstractPollAnswer';
 
 const useStyles = makeStyles((theme: Theme) => {
     return {

react/features/polls/components/web/PollCreate.tsx

@@ -3,13 +3,12 @@ import { makeStyles } from '@material-ui/core';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import Icon from '../../../base/icons/components/Icon';
-import { IconMenu } from '../../../base/icons/svg/index';
+import { IconMenu } from '../../../base/icons/svg';
 // @ts-ignore
 import { Tooltip } from '../../../base/tooltip';
 import Button from '../../../base/ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../base/ui/constants';
 import { Theme } from '../../../base/ui/types';
-// @ts-ignore
 import { ANSWERS_LIMIT, CHAR_LIMIT } from '../../constants';
 // @ts-ignore
 import AbstractPollCreate from '../AbstractPollCreate';

react/features/polls/components/web/PollsPane.tsx

@@ -7,7 +7,6 @@ import AbstractPollsPane from '../AbstractPollsPane';
 // @ts-ignore
 import type { AbstractProps } from '../AbstractPollsPane';
 
-// @ts-ignore
 import PollCreate from './PollCreate';
 // @ts-ignore
 import PollsList from './PollsList';

react/features/prejoin/components/Prejoin.native.tsx

@@ -23,7 +23,7 @@ import { setAudioOnly } from '../../base/audio-only/actions';
 import { getConferenceName } from '../../base/conference/functions';
 // @ts-ignore
 import { connect } from '../../base/connection/actions.native';
-import { IconClose } from '../../base/icons/svg/index';
+import { IconClose } from '../../base/icons/svg';
 // @ts-ignore
 import JitsiScreen from '../../base/modal/components/JitsiScreen';
 import { getLocalParticipant } from '../../base/participants/functions';

react/features/prejoin/components/dialogs/CallingDialog.tsx

@@ -7,7 +7,7 @@ import { WithTranslation } from 'react-i18next';
 import { Avatar } from '../../../base/avatar';
 import { translate } from '../../../base/i18n/functions';
 import Icon from '../../../base/icons/components/Icon';
-import { IconClose } from '../../../base/icons/svg/index';
+import { IconClose } from '../../../base/icons/svg';
 // @ts-ignore
 import Label from '../Label';
 

react/features/prejoin/components/dialogs/DialInDialog.tsx

@@ -5,7 +5,7 @@ import { WithTranslation } from 'react-i18next';
 
 import { translate } from '../../../base/i18n/functions';
 import Icon from '../../../base/icons/components/Icon';
-import { IconArrowLeft } from '../../../base/icons/svg/index';
+import { IconArrowLeft } from '../../../base/icons/svg';
 // @ts-ignore
 import { ActionButton } from '../../../base/premeeting';
 // @ts-ignore

react/features/prejoin/components/dialogs/DialOutDialog.tsx

@@ -5,7 +5,7 @@ import { WithTranslation } from 'react-i18next';
 
 import { translate } from '../../../base/i18n/functions';
 import Icon from '../../../base/icons/components/Icon';
-import { IconClose } from '../../../base/icons/svg/index';
+import { IconClose } from '../../../base/icons/svg';
 // @ts-ignore
 import { ActionButton } from '../../../base/premeeting';
 // @ts-ignore

react/features/prejoin/reducer.ts

@@ -159,7 +159,7 @@ ReducerRegistry.register<IPrejoinState>(
  * @returns {Object}
  */
 function getStatusFromErrors(errors: {
-    audioAndVideoError?: {message: string},
+    audioAndVideoError?: { message: string },
     audioOnlyError?: { message: string },
     videoOnlyError?: Object }
 ) {

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

@@ -1,4 +1,4 @@
-/* eslint-disable import/order */
+/* eslint-disable lines-around-comment */
 import { withStyles } from '@material-ui/styles';
 import clsx from 'clsx';
 import React, { Component } from 'react';
@@ -9,24 +9,20 @@ import {
     createReactionMenuEvent,
     createToolbarEvent,
     sendAnalytics
-
     // @ts-ignore
 } from '../../../analytics';
 import { IState, IStore } from '../../../app/types';
 import { isMobileBrowser } from '../../../base/environment/utils';
-import { getLocalParticipant, hasRaisedHand } from '../../../base/participants/functions';
-import { raiseHand } from '../../../base/participants/actions';
 import { translate } from '../../../base/i18n/functions';
-
+import { raiseHand } from '../../../base/participants/actions';
+import { getLocalParticipant, hasRaisedHand } from '../../../base/participants/functions';
 import { connect } from '../../../base/redux/functions';
 import { Theme } from '../../../base/ui/types';
-
+import GifsMenu from '../../../gifs/components/web/GifsMenu';
 // @ts-ignore
-import { GifsMenu, GifsMenuButton } from '../../../gifs/components';
-
+import GifsMenuButton from '../../../gifs/components/web/GifsMenuButton';
 // @ts-ignore
 import { isGifEnabled, isGifsMenuOpen } from '../../../gifs/functions';
-
 // @ts-ignore
 import { dockToolbox } from '../../../toolbox/actions.web';
 import { addReactionToBuffer } from '../../actions.any';

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

@@ -6,7 +6,7 @@ import { useSelector } from 'react-redux';
 import { IState } from '../../../app/types';
 import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n/functions';
-import { IconArrowUp } from '../../../base/icons/svg/index';
+import { IconArrowUp } from '../../../base/icons/svg';
 import { connect } from '../../../base/redux/functions';
 // @ts-ignore
 import ToolboxButtonWithIconPopup from '../../../base/toolbox/components/web/ToolboxButtonWithIconPopup';

react/features/reactions/logger.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import { getLogger } from '../base/logging/functions';
 
 export default getLogger('features/base/reactions');

react/features/reactions/middleware.ts

@@ -1,16 +1,14 @@
-/* eslint-disable import/order */
+/* eslint-disable lines-around-comment */
 import { batch } from 'react-redux';
 
 // @ts-ignore
 import { createReactionSoundsDisabledEvent, sendAnalytics } from '../analytics';
-
 import { IStore } from '../app/types';
 import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../base/app/actionTypes';
 import {
     CONFERENCE_JOIN_IN_PROGRESS,
     SET_START_REACTIONS_MUTED,
     setStartReactionsMuted
-
     // @ts-ignore
 } from '../base/conference';
 import {
@@ -18,19 +16,14 @@ import {
     getParticipantCount,
     isLocalParticipantModerator
 } from '../base/participants/functions';
-
 import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 import { SETTINGS_UPDATED } from '../base/settings/actionTypes';
-
 // @ts-ignore
 import { updateSettings } from '../base/settings/actions';
-
 // @ts-ignore
 import { playSound, registerSound, unregisterSound } from '../base/sounds';
-
 // @ts-ignore
 import { getDisabledSounds } from '../base/sounds/functions.any';
-
 // @ts-ignore
 import { NOTIFICATION_TIMEOUT_TYPE, showNotification } from '../notifications';
 

react/features/recording/components/Recording/LocalRecordingManager.web.ts

@@ -1,20 +1,14 @@
-/* eslint-disable import/order */
-
+/* eslint-disable lines-around-comment */
 import { v4 as uuidV4 } from 'uuid';
 import fixWebmDuration from 'webm-duration-fix';
 
 import { IStore } from '../../../app/types';
-
 // @ts-ignore
 import { getRoomName } from '../../../base/conference';
-
-// @ts-ignore
-import { MEDIA_TYPE } from '../../../base/media';
-
+import { MEDIA_TYPE } from '../../../base/media/constants';
 // @ts-ignore
 import { getTrackState, getLocalTrack } from '../../../base/tracks';
 import { inIframe } from '../../../base/util/iframeUtils';
-
 // @ts-ignore
 import { stopLocalVideoRecording } from '../../actions.any';
 

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

@@ -8,8 +8,7 @@ import { StartRecordingDialog } from '../..';
 import { openDialog } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n/functions';
 import { IconHighlight } from '../../../../base/icons/svg';
-// @ts-ignore
-import { Label } from '../../../../base/label';
+import Label from '../../../../base/label/components/web/Label';
 import { connect } from '../../../../base/redux/functions';
 // @ts-ignore
 import { Tooltip } from '../../../../base/tooltip';
@@ -154,8 +153,8 @@ export class HighlightButton extends AbstractHighlightButton<Props, State> {
     * @param {Event} e - The click event.
     * @returns {void}
     */
-    _onClick(e: React.MouseEvent) {
-        e.stopPropagation();
+    _onClick(e?: React.MouseEvent) {
+        e?.stopPropagation();
 
         // @ts-ignore
         const { _disabled } = this.props;