ref: Improve TS state (#12125)

Create IStateful interface
Use IState interface everywhere
Remove unnecessary @ts-ignore

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

@@ -5,6 +5,8 @@ import type { Dispatch } from 'redux';
 
 // @ts-ignore
 import { connect } from '../../../../../connection';
+import { IState } from '../../../app/types';
+import { IConfig } from '../../../base/config/configType';
 // @ts-ignore
 import { toJid } from '../../../base/connection/functions';
 // @ts-ignore
@@ -34,7 +36,7 @@ interface Props extends WithTranslation {
     /**
      * The server hosts specified in the global config.
      */
-    _configHosts: Object,
+    _configHosts: IConfig['hosts'],
 
     /**
      * Indicates if the dialog should display "connecting" status message.
@@ -295,7 +297,7 @@ class LoginDialog extends Component<Props, State> {
  * @private
  * @returns {Props}
  */
-function mapStateToProps(state: any) {
+function mapStateToProps(state: IState) {
     const {
         error: authenticateAndUpgradeRoleError,
         progress,

react/features/base/app/types.ts

@@ -0,0 +1,3 @@
+import { IState, IStore } from '../../app/types';
+
+export type IStateful = Function | IStore | IState;

react/features/base/conference/reducer.ts

@@ -55,6 +55,7 @@ export interface IConferenceState {
     membersOnly: boolean|undefined;
     obfuscatedRoom?: string;
     obfuscatedRoomSource?: string;
+    p2p?: Object;
     password: string|undefined;
     passwordRequired: boolean|undefined;
     pendingSubjectChange?: string;

react/features/base/config/configType.ts

@@ -311,6 +311,7 @@ export interface IConfig {
         disabled?: boolean;
     };
     gravatarBaseURL?: string;
+    helpCentreURL?: string;
     hiddenPremeetingButtons?: Array<'microphone' | 'camera' | 'select-background' | 'invite' | 'settings'>;
     hideAddRoomButton?: boolean;
     hideConferenceSubject?: boolean;
@@ -328,6 +329,8 @@ export interface IConfig {
         focus?: string;
         muc: string;
     };
+    iAmRecorder?: boolean;
+    iAmSipGateway?: boolean;
     inviteAppName?: string|null;
     lastNLimits?: {
         [key: number]: number;
@@ -342,6 +345,7 @@ export interface IConfig {
     liveStreamingEnabled?: boolean;
     localRecording?: {
         disable?: boolean;
+        disableSelfRecording?: boolean;
         notifyAllParticipants?: boolean;
     };
     localSubject?: string;
@@ -468,6 +472,7 @@ export interface IConfig {
         preferredCodec?: string;
         resizeDesktopForPresenter?: boolean;
     };
+    webhookProxyUrl?: string;
     webrtcIceTcpDisable?: boolean;
     webrtcIceUdpDisable?: boolean;
     websocket?: string;

react/features/base/connection/reducer.ts

@@ -18,7 +18,9 @@ import { ConnectionFailedError } from './actions.native';
 
 export interface IConnectionState {
     connecting?: Object;
-    connection?: Object;
+    connection?: {
+        getJid: () => string;
+    };
     error?: ConnectionFailedError;
     locationURL?: URL;
     passwordRequired?: Object;
@@ -97,7 +99,7 @@ function _connectionDisconnected(
 function _connectionEstablished(
         state: IConnectionState,
         { connection, timeEstablished }: {
-            connection: Object,
+            connection: any,
             timeEstablished: number
         }) {
     return assign(state, {

react/features/base/dialog/components/native/BottomSheetContainer.tsx

@@ -1,10 +1,12 @@
 import React, { Fragment } from 'react';
 import { useSelector } from 'react-redux';
 
+import { IState } from '../../../../app/types';
+
 
 const BottomSheetContainer: () => JSX.Element|null = (): JSX.Element|null => {
-    const { sheet, sheetProps } = useSelector((state: any) => state['features/base/dialog']);
+    const { sheet, sheetProps } = useSelector((state: IState) => state['features/base/dialog']);
-    const { reducedUI } = useSelector((state: any) => state['features/base/responsive-ui']);
+    const { reducedUI } = useSelector((state: IState) => state['features/base/responsive-ui']);
 
     if (!sheet || reducedUI) {
         return null;

react/features/base/dialog/reducer.ts

@@ -1,3 +1,5 @@
+import { ComponentType } from 'react';
+
 import ReducerRegistry from '../redux/ReducerRegistry';
 import { assign } from '../redux/functions';
 
@@ -9,9 +11,9 @@ import {
 } from './actionTypes';
 
 export interface IDialogState {
-    component?: Object;
+    component?: ComponentType;
     componentProps?: Object;
-    sheet?: Object;
+    sheet?: ComponentType;
     sheetProps?: Object;
 }
 

react/features/base/participants/functions.ts

@@ -2,9 +2,10 @@
 // @ts-ignore
 import { getGravatarURL } from '@jitsi/js-utils/avatar';
 
-import { IState, IStore } from '../../app/types';
+import { IStore } from '../../app/types';
 // @ts-ignore
 import { isStageFilmstripAvailable } from '../../filmstrip/functions';
+import { IStateful } from '../app/types';
 import { GRAVATAR_BASE_URL } from '../avatar/constants';
 import { isCORSAvatarURL } from '../avatar/functions';
 // @ts-ignore
@@ -61,7 +62,7 @@ const AVATAR_CHECKER_FUNCTIONS = [
  * retrieve the state.
  * @returns {Array<string>}
  */
-export function getActiveSpeakersToBeDisplayed(stateful: IStore | Function) {
+export function getActiveSpeakersToBeDisplayed(stateful: IStateful) {
     const state = toState(stateful);
     const {
         dominantSpeaker,
@@ -159,7 +160,7 @@ export function getFirstLoadableAvatarUrl(participant: Participant, store: IStor
  * features/base/participants.
  * @returns {(Participant|undefined)}
  */
-export function getLocalParticipant(stateful: IStore | Function | IState) {
+export function getLocalParticipant(stateful: IStateful) {
     const state = toState(stateful)['features/base/participants'];
 
     return state.local;
@@ -172,7 +173,7 @@ export function getLocalParticipant(stateful: IStore | Function | IState) {
  * {@code getState} function to be used to retrieve the state features/base/participants.
  * @returns {(Participant|undefined)}
  */
-export function getLocalScreenShareParticipant(stateful: IStore | Function) {
+export function getLocalScreenShareParticipant(stateful: IStateful) {
     const state = toState(stateful)['features/base/participants'];
 
     return state.localScreenShare;
@@ -186,7 +187,7 @@ export function getLocalScreenShareParticipant(stateful: IStore | Function) {
  * @param {string} id - The owner ID of the screenshare participant to retrieve.
  * @returns {(Participant|undefined)}
  */
-export function getVirtualScreenshareParticipantByOwnerId(stateful: IStore | Function, id: string) {
+export function getVirtualScreenshareParticipantByOwnerId(stateful: IStateful, id: string) {
     const state = toState(stateful);
 
     if (getMultipleVideoSupportFeatureFlag(state)) {
@@ -223,8 +224,7 @@ export function getNormalizedDisplayName(name: string) {
  * @private
  * @returns {(Participant|undefined)}
  */
-export function getParticipantById(
+export function getParticipantById(stateful: IStateful, id: string): Participant|undefined {
-        stateful: IStore | Function | IState, id: string): Participant|undefined {
     const state = toState(stateful)['features/base/participants'];
     const { local, localScreenShare, remote } = state;
 
@@ -243,7 +243,7 @@ export function getParticipantById(
  * @param {string|undefined} [participantID] - An optional partipantID argument.
  * @returns {Participant|undefined}
  */
-export function getParticipantByIdOrUndefined(stateful: IStore | Function, participantID?: string) {
+export function getParticipantByIdOrUndefined(stateful: IStateful, participantID?: string) {
     return participantID ? getParticipantById(stateful, participantID) : getLocalParticipant(stateful);
 }
 
@@ -256,7 +256,7 @@ export function getParticipantByIdOrUndefined(stateful: IStore | Function, parti
  * features/base/participants.
  * @returns {number}
  */
-export function getParticipantCount(stateful: IStore | Function | IState) {
+export function getParticipantCount(stateful: IStateful) {
     const state = toState(stateful);
     const {
         local,
@@ -292,7 +292,7 @@ export function getVirtualScreenshareParticipantOwnerId(id: string) {
  * features/base/participants.
  * @returns {Map<string, Participant>} - The Map with fake participants.
  */
-export function getFakeParticipants(stateful: IStore | Function) {
+export function getFakeParticipants(stateful: IStateful) {
     return toState(stateful)['features/base/participants'].fakeParticipants;
 }
 
@@ -304,7 +304,7 @@ export function getFakeParticipants(stateful: IStore | Function) {
  * features/base/participants.
  * @returns {number}
  */
-export function getRemoteParticipantCount(stateful: IStore | Function) {
+export function getRemoteParticipantCount(stateful: IStateful) {
     const state = toState(stateful)['features/base/participants'];
 
     if (getMultipleVideoSupportFeatureFlag(state)) {
@@ -323,7 +323,7 @@ export function getRemoteParticipantCount(stateful: IStore | Function) {
  * features/base/participants.
  * @returns {number}
  */
-export function getParticipantCountWithFake(stateful: IStore | Function) {
+export function getParticipantCountWithFake(stateful: IStateful) {
     const state = toState(stateful);
     const { local, localScreenShare, remote } = state['features/base/participants'];
 
@@ -342,7 +342,7 @@ export function getParticipantCountWithFake(stateful: IStore | Function) {
  * @param {string} id - The ID of the participant's display name to retrieve.
  * @returns {string}
  */
-export function getParticipantDisplayName(stateful: IStore | Function | IState, id: string): string {
+export function getParticipantDisplayName(stateful: IStateful, id: string): string {
     const participant = getParticipantById(stateful, id);
     const {
         defaultLocalDisplayName,
@@ -374,7 +374,7 @@ export function getParticipantDisplayName(stateful: IStore | Function | IState,
  * @param {string} id - The ID of the screenshare participant's display name to retrieve.
  * @returns {string}
  */
-export function getScreenshareParticipantDisplayName(stateful: IStore | Function| IState, id: string) {
+export function getScreenshareParticipantDisplayName(stateful: IStateful, id: string) {
     const ownerDisplayName = getParticipantDisplayName(stateful, getVirtualScreenshareParticipantOwnerId(id));
 
     return i18next.t('screenshareDisplayName', { name: ownerDisplayName });
@@ -388,8 +388,7 @@ export function getScreenshareParticipantDisplayName(stateful: IStore | Function
  * @param {string} id - The id of the participant.
  * @returns {string} - The presence status.
  */
-export function getParticipantPresenceStatus(
+export function getParticipantPresenceStatus(stateful: IStateful, id: string) {
-        stateful: IStore | Function, id: string) {
     if (!id) {
         return undefined;
     }
@@ -410,7 +409,7 @@ export function getParticipantPresenceStatus(
  * features/base/participants.
  * @returns {Map<string, Object>}
  */
-export function getRemoteParticipants(stateful: IStore | Function) {
+export function getRemoteParticipants(stateful: IStateful) {
     return toState(stateful)['features/base/participants'].remote;
 }
 
@@ -421,7 +420,7 @@ export function getRemoteParticipants(stateful: IStore | Function) {
  * retrieve the state features/filmstrip.
  * @returns {Array<string>}
  */
-export function getRemoteParticipantsSorted(stateful: IStore | Function) {
+export function getRemoteParticipantsSorted(stateful: IStateful) {
     return toState(stateful)['features/filmstrip'].remoteParticipants;
 }
 
@@ -433,7 +432,7 @@ export function getRemoteParticipantsSorted(stateful: IStore | Function) {
  * features/base/participants.
  * @returns {(Participant|undefined)}
  */
-export function getPinnedParticipant(stateful: IStore | Function) {
+export function getPinnedParticipant(stateful: IStateful) {
     const state = toState(stateful);
     const { pinnedParticipant } = state['features/base/participants'];
     const stageFilmstrip = isStageFilmstripAvailable(state);
@@ -469,7 +468,7 @@ export function isParticipantModerator(participant?: Participant) {
  * {@code getState} function to be used to retrieve the state features/base/participants.
  * @returns {Participant} - The participant from the redux store.
  */
-export function getDominantSpeakerParticipant(stateful: IStore | Function) {
+export function getDominantSpeakerParticipant(stateful: IStateful) {
     const state = toState(stateful)['features/base/participants'];
     const { dominantSpeaker } = state;
 
@@ -487,7 +486,7 @@ export function getDominantSpeakerParticipant(stateful: IStore | Function) {
  * to the Redux state.
  * @returns {boolean}
  */
-export function isEveryoneModerator(stateful: IStore | Function) {
+export function isEveryoneModerator(stateful: IStateful) {
     const state = toState(stateful)['features/base/participants'];
 
     return state.everyoneIsModerator === true;
@@ -511,7 +510,7 @@ export function isIconUrl(icon?: string | Object) {
  * to the Redux state.
  * @returns {boolean}
  */
-export function isLocalParticipantModerator(stateful: IStore | Function | IState) {
+export function isLocalParticipantModerator(stateful: IStateful) {
     const state = toState(stateful)['features/base/participants'];
 
     const { local } = state;
@@ -532,7 +531,7 @@ export function isLocalParticipantModerator(stateful: IStore | Function | IState
  * @param {string} id - The ID of the participant.
  * @returns {boolean}
  */
-export function shouldRenderParticipantVideo(stateful: IStore | Function, id: string) {
+export function shouldRenderParticipantVideo(stateful: IStateful, id: string) {
     const state = toState(stateful);
     const participant = getParticipantById(state, id);
 
@@ -636,7 +635,7 @@ async function _getFirstLoadableAvatarUrl(participant: Participant, store: IStor
  * features/base/participants.
  * @returns {Array<Object>}
  */
-export function getRaiseHandsQueue(stateful: IStore | Function): Array<Object> {
+export function getRaiseHandsQueue(stateful: IStateful): Array<Object> {
     const { raisedHandsQueue } = toState(stateful)['features/base/participants'];
 
     return raisedHandsQueue;

react/features/base/redux/functions.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import { connect as reduxConnect } from 'react-redux';
 
-import { IState, IStore } from '../../app/types';
+import { IStateful } from '../app/types';
 
 /**
  * Sets specific properties of a specific state to specific values and prevents
@@ -35,7 +35,7 @@ export function assign<T extends Object>(target: T, source: Partial<T>): T {
  * @returns {Connector}
  */
 export function connect(
-        mapStateToProps?: any, mapDispatchToProps?: Function) {
+        mapStateToProps?: any, mapDispatchToProps?: Function|Object) {
     return reduxConnect(mapStateToProps, mapDispatchToProps);
 }
 
@@ -135,7 +135,7 @@ function _set<T extends Object>(
  * returned.
  * @returns {Object} The redux state.
  */
-export function toState(stateful: Function | IStore | IState) {
+export function toState(stateful: IStateful) {
     if (stateful) {
         if (typeof stateful === 'function') {
             return stateful();

react/features/base/settings/reducer.ts

@@ -6,8 +6,7 @@ import _ from 'lodash';
 import { APP_WILL_MOUNT } from '../app/actionTypes';
 import PersistenceRegistry from '../redux/PersistenceRegistry';
 import ReducerRegistry from '../redux/ReducerRegistry';
-// @ts-ignore
+import { assignIfDefined } from '../util/helpers';
-import { assignIfDefined } from '../util';
 
 import { SETTINGS_UPDATED } from './actionTypes';
 
@@ -84,6 +83,7 @@ export interface ISettingsState {
         [key: string]: boolean;
     }|boolean,
     userSelectedSkipPrejoin?: boolean;
+    visible?: boolean;
 }
 
 const STORE_NAME = 'features/base/settings';

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

@@ -2,6 +2,8 @@ import { ThemeProvider } from '@material-ui/core/styles';
 import * as React from 'react';
 import { connect } from 'react-redux';
 
+import { IState } from '../../../app/types';
+
 import BaseTheme from './BaseTheme.web';
 
 type Props = {
@@ -33,7 +35,7 @@ function JitsiThemeProvider(props: Props) {
  * @param {Object} state - The Redux state.
  * @returns {Props}
  */
-function _mapStateToProps(state: any) {
+function _mapStateToProps(state: IState) {
     const { muiBrandedTheme } = state['features/dynamic-branding'];
 
     return {

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

@@ -10,12 +10,12 @@ import {
     ACTION_SHORTCUT_RELEASED as RELEASED
     // @ts-ignore
 } from '../../../../analytics';
+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';
-// @ts-ignore
+import { MEDIA_TYPE } from '../../../../base/media/constants';
-import { MEDIA_TYPE } from '../../../../base/media';
 // @ts-ignore
 import { isLocalTrackMuted } from '../../../../base/tracks';
 // @ts-ignore
@@ -35,7 +35,8 @@ const LONG_PRESS = 'long.press';
  */
 const MicrophoneButton = () : JSX.Element|null => {
     const dispatch = useDispatch();
-    const audioMuted = useSelector((state: any) => isLocalTrackMuted(state['features/base/tracks'], MEDIA_TYPE.AUDIO));
+    const audioMuted = useSelector((state: IState) => isLocalTrackMuted(state['features/base/tracks'],
+        MEDIA_TYPE.AUDIO));
     const disabled = useSelector(isAudioMuteButtonDisabled);
     const enabledFlag = useSelector(state => getFeatureFlag(state, AUDIO_MUTE_BUTTON_ENABLED, true));
     const [ longPress, setLongPress ] = useState(false);

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

@@ -3,6 +3,7 @@ import React from 'react';
 import { StyleProp, Text, View, ViewStyle } from 'react-native';
 import { useSelector } from 'react-redux';
 
+import { IState } from '../../../../app/types';
 // @ts-ignore
 import { getConferenceName } from '../../../../base/conference/functions';
 // @ts-ignore
@@ -86,7 +87,7 @@ const TitleBar = (props: Props) : JSX.Element => {
  * @param {Object} state - The Redux state.
  * @returns {Props}
  */
-function _mapStateToProps(state: any) {
+function _mapStateToProps(state: IState) {
     const { hideConferenceSubject } = state['features/base/config'];
 
     return {

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

@@ -1,23 +1,21 @@
-/* eslint-disable import/order */
+/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
+import { IState } from '../../../app/types';
 import { IconMenuDown } from '../../../base/icons/svg/index';
-
 // @ts-ignore
 import { Label } from '../../../base/label';
-
 // @ts-ignore
 import { Tooltip } from '../../../base/tooltip';
-
 // @ts-ignore
 import { setTopPanelVisible } from '../../../filmstrip/actions.web';
 
 const ToggleTopPanelLabel = () => {
     const dispatch = useDispatch();
     const { t } = useTranslation();
-    const topPanelHidden = !useSelector((state: any) => state['features/filmstrip'].topPanelVisible);
+    const topPanelHidden = !useSelector((state: IState) => state['features/filmstrip'].topPanelVisible);
     const onClick = useCallback(() => {
         dispatch(setTopPanelVisible(true));
     }, []);

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Text, View } from 'react-native';
 
+import { IState } from '../../../app/types';
 import {
     getParticipantById,
     getParticipantDisplayName
@@ -66,7 +67,7 @@ class DisplayNameLabel extends React.Component<Props> {
  * @param {Props} ownProps - The own props of the component.
  * @returns {Props}
  */
-function _mapStateToProps(state: any, ownProps: any) {
+function _mapStateToProps(state: IState, ownProps: any) {
     const participant = getParticipantById(state, ownProps.participantId);
 
     return {

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Image, ImageStyle, StyleProp, ViewStyle } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 
+import { IState } from '../../../app/types';
 import { connect } from '../../../base/redux/functions';
 
 import styles from './styles';
@@ -64,7 +65,7 @@ const BrandingImageBackground: React.FC<Props> = ({ uri }:Props) => {
  * @private
  * @returns {Props}
  */
-function _mapStateToProps(state: any) {
+function _mapStateToProps(state: IState) {
     const { backgroundImageUrl } = state['features/dynamic-branding'];
 
     return {

react/features/e2ee/components/E2EESection.tsx

@@ -5,12 +5,12 @@ import type { Dispatch } from 'redux';
 
 // @ts-ignore
 import { createE2EEEvent, sendAnalytics } from '../../analytics';
+import { IState } from '../../app/types';
 import { translate } from '../../base/i18n/functions';
 import { connect } from '../../base/redux/functions';
 import Switch from '../../base/ui/components/web/Switch';
 // @ts-ignore
 import { toggleE2EE } from '../actions';
-// @ts-ignore
 import { MAX_MODE } from '../constants';
 // @ts-ignore
 import { doesEveryoneSupportE2EE } from '../functions';
@@ -157,7 +157,7 @@ class E2EESection extends Component<Props, State> {
  * @private
  * @returns {Props}
  */
-function mapStateToProps(state: any) {
+function mapStateToProps(state: IState) {
     const { enabled: e2eeEnabled, maxMode } = state['features/e2ee'];
     const { e2eeLabels } = state['features/base/config'];
 

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

@@ -13,6 +13,7 @@ import {
     sendAnalytics
     // @ts-ignore
 } from '../../../analytics';
+import { IState } from '../../../app/types';
 // @ts-ignore
 import { getSourceNameSignalingFeatureFlag, getToolbarButtons } from '../../../base/config';
 import { isMobileBrowser } from '../../../base/environment/utils';
@@ -886,7 +887,7 @@ class Filmstrip extends PureComponent <Props, State> {
  * @private
  * @returns {Props}
  */
-function _mapStateToProps(state: any, ownProps: any) {
+function _mapStateToProps(state: IState, ownProps: any) {
     const { _hasScroll = false, filmstripType, _topPanelFilmstrip, _remoteParticipants } = ownProps;
     const toolbarButtons = getToolbarButtons(state);
     const { testing = {}, iAmRecorder } = state['features/base/config'];

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

@@ -6,6 +6,7 @@ import React, { Component } from 'react';
 
 // @ts-ignore
 import { createScreenSharingIssueEvent, sendAnalytics } from '../../../analytics';
+import { IState } from '../../../app/types';
 // @ts-ignore
 import { Avatar } from '../../../base/avatar';
 // @ts-ignore
@@ -13,7 +14,8 @@ import { getMultipleVideoSupportFeatureFlag, getSourceNameSignalingFeatureFlag }
 import { isMobileBrowser } from '../../../base/environment/utils';
 import { JitsiTrackEvents } from '../../../base/lib-jitsi-meet';
 // @ts-ignore
-import { MEDIA_TYPE, VideoTrack } from '../../../base/media';
+import { VideoTrack } from '../../../base/media';
+import { MEDIA_TYPE } from '../../../base/media/constants';
 import { pinParticipant } from '../../../base/participants/actions';
 import {
     getLocalParticipant,
@@ -1156,7 +1158,7 @@ class Thumbnail extends Component<Props, State> {
  * @private
  * @returns {Props}
  */
-function _mapStateToProps(state: any, ownProps: any): Object {
+function _mapStateToProps(state: IState, ownProps: any): Object {
     const { participantID, filmstripType = FILMSTRIP_TYPE.MAIN } = ownProps;
 
     const participant = getParticipantByIdOrUndefined(state, participantID);
@@ -1208,6 +1210,7 @@ function _mapStateToProps(state: any, ownProps: any): Object {
         const { local, remote }
             = tileType === THUMBNAIL_TYPE.VERTICAL
                 ? verticalViewDimensions : horizontalViewDimensions;
+        // @ts-ignore
         const { width, height } = (isLocal ? local : remote) ?? {};
 
         size = {
@@ -1216,6 +1219,7 @@ function _mapStateToProps(state: any, ownProps: any): Object {
         };
 
         if (_verticalViewGrid) {
+            // @ts-ignore
             const { width: _width, height: _height } = verticalViewDimensions.gridView.thumbnailSize;
 
             size = {
@@ -1229,6 +1233,7 @@ function _mapStateToProps(state: any, ownProps: any): Object {
         break;
     }
     case THUMBNAIL_TYPE.TILE: {
+        // @ts-ignore
         const { thumbnailSize } = state['features/filmstrip'].tileViewDimensions;
         const {
             stageFilmstripDimensions = {
@@ -1243,6 +1248,7 @@ function _mapStateToProps(state: any, ownProps: any): Object {
         };
 
         if (filmstripType === FILMSTRIP_TYPE.STAGE) {
+            // @ts-ignore
             const { width: _width, height: _height } = stageFilmstripDimensions.thumbnailSize;
 
             size = {
@@ -1250,6 +1256,7 @@ function _mapStateToProps(state: any, ownProps: any): Object {
                 _height
             };
         } else if (filmstripType === FILMSTRIP_TYPE.SCREENSHARE) {
+            // @ts-ignore
             const { width: _width, height: _height } = screenshareFilmstripDimensions.thumbnailSize;
 
             size = {

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

@@ -2,6 +2,7 @@
 import React, { PureComponent } from 'react';
 import { WithTranslation } from 'react-i18next';
 
+import { IState } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
 import { isLocalParticipantModerator } from '../../../base/participants/functions';
 import { connect } from '../../../base/redux/functions';
@@ -129,7 +130,7 @@ class LobbySection extends PureComponent<Props, State> {
  * @param {Object} state - The Redux state.
  * @returns {Props}
  */
-function mapStateToProps(state: any): Partial<Props> {
+function mapStateToProps(state: IState): Partial<Props> {
     const { conference } = state['features/base/conference'];
     const { hideLobbyButton } = state['features/base/config'];
 

react/features/notifications/components/web/NotificationsContainer.tsx

@@ -7,6 +7,7 @@ import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
+import { IState } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
 import { connect } from '../../../base/redux/functions';
 // @ts-ignore
@@ -238,7 +239,7 @@ class NotificationsContainer extends Component<Props> {
  * @private
  * @returns {Props}
  */
-function _mapStateToProps(state: any) {
+function _mapStateToProps(state: IState) {
     const { notifications } = state['features/notifications'];
     const { iAmSipGateway } = state['features/base/config'];
     const { isOpen: isChatOpen } = state['features/chat'];

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

@@ -3,6 +3,7 @@ import React, { PureComponent } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { Text, View } from 'react-native';
 
+import { IState } from '../../../app/types';
 // @ts-ignore
 import { Avatar } from '../../../base/avatar';
 // @ts-ignore
@@ -139,7 +140,7 @@ class RoomParticipantMenu extends PureComponent<Props> {
  * @private
  * @returns {Props}
  */
-function _mapStateToProps(state: any) {
+function _mapStateToProps(state: IState) {
     return {
         _rooms: Object.values(getBreakoutRooms(state))
     };

react/features/polls/components/AbstractPollAnswer.tsx

@@ -48,7 +48,7 @@ const AbstractPollAnswer = (Component: ComponentType<AbstractProps>) => (props:
 
     const conference: any = useSelector((state: IState) => state['features/base/conference'].conference);
 
-    const poll: Poll = useSelector((state: any) => state['features/polls'].polls[pollId]);
+    const poll: Poll = useSelector((state: IState) => state['features/polls'].polls[pollId]);
 
     const { id: localId } = useSelector(getLocalParticipant);
 

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

@@ -16,6 +16,7 @@ import { useDispatch, useSelector } from 'react-redux';
 
 // @ts-ignore
 import { appNavigate } from '../../app/actions.native';
+import { IState } from '../../app/types';
 // @ts-ignore
 import { setAudioOnly } from '../../base/audio-only/actions';
 // @ts-ignore
@@ -28,11 +29,9 @@ import JitsiScreen from '../../base/modal/components/JitsiScreen';
 import { getLocalParticipant } from '../../base/participants/functions';
 // @ts-ignore
 import { getFieldValue } from '../../base/react';
-// @ts-ignore
+import { ASPECT_RATIO_NARROW } from '../../base/responsive-ui/constants';
-import { ASPECT_RATIO_NARROW } from '../../base/responsive-ui';
 // @ts-ignore
 import { updateSettings } from '../../base/settings';
-// @ts-ignore
 import BaseTheme from '../../base/ui/components/BaseTheme.native';
 import Button from '../../base/ui/components/native/Button';
 import { BUTTON_TYPES } from '../../base/ui/constants';
@@ -62,9 +61,9 @@ const Prejoin: React.FC<PrejoinProps> = ({ navigation }: PrejoinProps) => {
     const isFocused = useIsFocused();
     const { t } = useTranslation();
     const aspectRatio = useSelector(
-        (state: any) => state['features/base/responsive-ui']?.aspectRatio
+        (state: IState) => state['features/base/responsive-ui']?.aspectRatio
     );
-    const localParticipant = useSelector((state: any) => getLocalParticipant(state));
+    const localParticipant = useSelector((state: IState) => getLocalParticipant(state));
     const isDisplayNameMandatory = useSelector(state => isDisplayNameRequired(state));
     const roomName = useSelector(state => getConferenceName(state));
     const participantName = localParticipant?.name;

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

@@ -12,8 +12,7 @@ import {
 
     // @ts-ignore
 } from '../../../analytics';
-import { IStore } from '../../../app/types';
+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';
@@ -250,7 +249,7 @@ class ReactionsMenu extends Component<Props> {
  * @param {Object} state - Redux state.
  * @returns {Object}
  */
-function mapStateToProps(state: any) {
+function mapStateToProps(state: IState) {
     const localParticipant = getLocalParticipant(state);
 
     return {

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

@@ -1,13 +1,13 @@
-/* eslint-disable import/order */
+/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
 import { WithTranslation } from 'react-i18next';
-
 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 { connect } from '../../../base/redux/functions';
-
 // @ts-ignore
 import ToolboxButtonWithIconPopup from '../../../base/toolbox/components/web/ToolboxButtonWithIconPopup';
 import { toggleReactionsMenuVisibility } from '../../actions.web';
@@ -134,7 +134,7 @@ function ReactionsMenuButton({
  * @param {Object} state - Redux state.
  * @returns {Object}
  */
-function mapStateToProps(state: any) {
+function mapStateToProps(state: IState) {
     return {
         _reactionsEnabled: isReactionsEnabled(state),
         isOpen: getReactionsMenuVisibility(state),

react/features/reactions/functions.any.ts

@@ -1,10 +1,10 @@
-/* eslint-disable import/order */
+/* eslint-disable lines-around-comment */
 import { v4 as uuidv4 } from 'uuid';
 
+import { IState } from '../app/types';
 // @ts-ignore
 import { getFeatureFlag, REACTIONS_ENABLED } from '../base/flags';
 import { getLocalParticipant } from '../base/participants/functions';
-
 // @ts-ignore
 import { extractFqnFromPath } from '../dynamic-branding/functions.any';
 
@@ -17,7 +17,7 @@ import logger from './logger';
  * @param {Object} state - The state of the application.
  * @returns {Array}
  */
-export function getReactionsQueue(state: any): Array<ReactionEmojiProps> {
+export function getReactionsQueue(state: IState): Array<ReactionEmojiProps> {
     return state['features/reactions'].queue;
 }
 
@@ -53,12 +53,12 @@ export function getReactionsWithId(buffer: Array<string>): Array<ReactionEmojiPr
  * @param {Array} reactions - Reactions array to be sent.
  * @returns {void}
  */
-export async function sendReactionsWebhook(state: any, reactions: Array<string>) {
+export async function sendReactionsWebhook(state: IState, reactions: Array<string>) {
     const { webhookProxyUrl: url } = state['features/base/config'];
     const { conference } = state['features/base/conference'];
     const { jwt } = state['features/base/jwt'];
     const { connection } = state['features/base/connection'];
-    const jid = connection.getJid();
+    const jid = connection?.getJid();
     const localParticipant = getLocalParticipant(state);
 
     const headers = {
@@ -154,7 +154,7 @@ export function getReactionsSoundsThresholds(reactions: Array<string>): Array<Re
  * @param {Object} state - The Redux state object.
  * @returns {boolean}
  */
-export function isReactionsEnabled(state: any): boolean {
+export function isReactionsEnabled(state: IState): boolean {
     const { disableReactions } = state['features/base/config'];
 
     if (navigator.product === 'ReactNative') {

react/features/reactions/functions.web.ts

@@ -1,9 +1,11 @@
+import { IState } from '../app/types';
+
 /**
  * Returns the visibility state of the reactions menu.
  *
  * @param {Object} state - The state of the application.
  * @returns {boolean}
  */
-export function getReactionsMenuVisibility(state: any): boolean {
+export function getReactionsMenuVisibility(state: IState): boolean {
     return state['features/reactions'].visible;
 }

react/features/recording/components/Recording/AbstractStartRecordingDialogContent.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable lines-around-comment  */
 import { Component } from 'react';
-// @ts-ignore
 import { WithTranslation } from 'react-i18next';
 
 import {
@@ -8,6 +7,7 @@ import {
     sendAnalytics
     // @ts-ignore
 } from '../../../analytics';
+import { IState } from '../../../app/types';
 // @ts-ignore
 import { ColorSchemeRegistry } from '../../../base/color-scheme';
 // @ts-ignore
@@ -340,7 +340,7 @@ class AbstractStartRecordingDialogContent<P extends Props> extends Component<P>
  * @param {Object} state - The Redux state.
  * @returns {Props}
  */
-export function mapStateToProps(state: any) {
+export function mapStateToProps(state: IState) {
     const { localRecording, recordingService } = state['features/base/config'];
     const _localRecordingAvailable
         = !localRecording?.disable && supportsLocalRecording();

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

@@ -1,12 +1,13 @@
 /* eslint-disable lines-around-comment */
 import React, { useState, useEffect } from 'react';
-import { connect } from 'react-redux';
 
+import { IState } from '../../../../app/types';
 // @ts-ignore
 import { setPassword as setPass } from '../../../../base/conference';
 // @ts-ignore
 import { Dialog } from '../../../../base/dialog';
 import { isLocalParticipantModerator } from '../../../../base/participants/functions';
+import { connect } from '../../../../base/redux/functions';
 // @ts-ignore
 import { E2EESection } from '../../../../e2ee/components';
 // @ts-ignore
@@ -125,7 +126,7 @@ function SecurityDialog({
  * @private
  * @returns {Props}
  */
-function mapStateToProps(state: any) {
+function mapStateToProps(state: IState) {
     const {
         conference,
         e2eeSupported,

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

@@ -2,12 +2,12 @@
 
 import React, { PureComponent } from 'react';
 
+import { IState } from '../../../app/types';
 // @ts-ignore
 import JitsiScreenWebView from '../../../base/modal/components/JitsiScreenWebView';
 // @ts-ignore
 import JitsiStatusBar from '../../../base/modal/components/JitsiStatusBar';
-// @ts-ignore
+import { connect } from '../../../base/redux/functions';
-import { connect } from '../../../base/redux';
 // @ts-ignore
 import { renderArrowBackButton }
 // @ts-ignore
@@ -81,7 +81,7 @@ class HelpView extends PureComponent<Props> {
  * @param {Object} state - The Redux state.
  * @returns {Props}
  */
-function _mapStateToProps(state: any) {
+function _mapStateToProps(state: IState) {
     return {
         _url: state['features/base/config'].helpCentreURL || DEFAULT_HELP_CENTRE_URL
     };

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

@@ -19,6 +19,7 @@ import {
 
 // @ts-ignore
 import { getDefaultURL } from '../../../app/functions';
+import { IState } from '../../../app/types';
 // @ts-ignore
 import { Avatar } from '../../../base/avatar';
 import { translate } from '../../../base/i18n/functions';
@@ -710,7 +711,7 @@ class SettingsView extends Component<Props, State> {
  * @param {Object} state - The Redux state.
  * @returns {Props}
  */
-function _mapStateToProps(state: any) {
+function _mapStateToProps(state: IState) {
     const localParticipant = getLocalParticipant(state);
 
     return {

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

@@ -17,11 +17,8 @@ import {
 } from '../../constants';
 
 import FaceExpressionsSwitch from './FaceExpressionsSwitch';
-// @ts-ignore
 import SpeakerStatsLabels from './SpeakerStatsLabels';
-// @ts-ignore
 import SpeakerStatsList from './SpeakerStatsList';
-// @ts-ignore
 import SpeakerStatsSearch from './SpeakerStatsSearch';
 
 const useStyles = makeStyles((theme: any) => {
@@ -95,7 +92,7 @@ const useStyles = makeStyles((theme: any) => {
 
 const SpeakerStats = () => {
     const { faceLandmarks } = useSelector((state: IState) => state['features/base/config']);
-    const { showFaceExpressions } = useSelector((state: any) => state['features/speaker-stats']);
+    const { showFaceExpressions } = useSelector((state: IState) => state['features/speaker-stats']);
     const { clientWidth } = useSelector((state: IState) => state['features/base/responsive-ui']);
     const displaySwitch = faceLandmarks?.enableDisplayFaceExpressions && clientWidth > DISPLAY_SWITCH_BREAKPOINT;
     const displayLabels = clientWidth > MOBILE_BREAKPOINT;

react/features/subtitles/components/LanguageSelectorDialog.web.tsx

@@ -2,12 +2,12 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { IState } from '../../app/types';
 // @ts-ignore
 import { Dialog } from '../../base/dialog';
 // @ts-ignore
 import { LANGUAGES, TRANSLATION_LANGUAGES_HEAD, TRANSLATION_LANGUAGES_EXCLUDE } from '../../base/i18n';
-// @ts-ignore
+import { connect } from '../../base/redux/functions';
-import { connect } from '../../base/redux';
 // @ts-ignore
 import { updateTranslationLanguage, setRequestingSubtitles, toggleLangugeSelectorDialog } from '../actions';
 
@@ -80,7 +80,7 @@ const LanguageSelectorDialog = ({ _language }: ILanguageSelectorDialogProps) =>
  * @private
  * @returns {Props}
  */
-function mapStateToProps(state: any) {
+function mapStateToProps(state: IState) {
     const {
         conference
     } = state['features/base/conference'];
@@ -95,6 +95,4 @@ function mapStateToProps(state: any) {
     };
 }
 
-const mapDispatchToProps = {};
+export default connect(mapStateToProps)(LanguageSelectorDialog);
-
-export default connect(mapStateToProps, mapDispatchToProps)(LanguageSelectorDialog);

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

@@ -6,6 +6,7 @@ import { WithTranslation } from 'react-i18next';
 
 // @ts-ignore
 import { createToolbarEvent, sendAnalytics } from '../../../analytics';
+import { IState } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
 import { connect } from '../../../base/redux/functions';
 // @ts-ignore
@@ -199,7 +200,7 @@ class OverflowMenuButton extends Component<Props> {
  * @param {Object} state - The Redux state.
  * @returns {Props}
  */
-function mapStateToProps(state: any) {
+function mapStateToProps(state: IState) {
     const { overflowDrawer } = state['features/toolbox'];
 
     return {

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

@@ -13,6 +13,7 @@ import {
     sendAnalytics
     // @ts-ignore
 } from '../../../analytics';
+import { IState } from '../../../app/types';
 // @ts-ignore
 import { ContextMenu, ContextMenuItemGroup } from '../../../base/components';
 // @ts-ignore
@@ -1481,7 +1482,7 @@ class Toolbox extends Component<Props> {
  * @private
  * @returns {{}}
  */
-function _mapStateToProps(state: any, ownProps: Partial<Props>) {
+function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
     const { conference } = state['features/base/conference'];
     const endConferenceSupported = conference?.isEndConferenceSupported();
     const {

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

@@ -4,9 +4,8 @@ import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { batch, connect } from 'react-redux';
 
-// @ts-ignore
+import { IState } from '../../../app/types';
 import ContextMenu from '../../../base/components/context-menu/ContextMenu';
-// @ts-ignore
 import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
 import { isMobileBrowser } from '../../../base/environment/utils';
 // @ts-ignore
@@ -24,8 +23,7 @@ import { getLocalVideoTrack } from '../../../base/tracks';
 import Button from '../../../base/ui/components/web/Button';
 // @ts-ignore
 import ConnectionIndicatorContent from '../../../connection-indicator/components/web/ConnectionIndicatorContent';
-// @ts-ignore
+import { THUMBNAIL_TYPE } from '../../../filmstrip/constants';
-import { THUMBNAIL_TYPE } from '../../../filmstrip';
 // @ts-ignore
 import { isStageFilmstripAvailable } from '../../../filmstrip/functions.web';
 // @ts-ignore
@@ -274,7 +272,7 @@ class LocalVideoMenuTriggerButton extends Component<Props> {
  * @private
  * @returns {Props}
  */
-function _mapStateToProps(state: any, ownProps: Partial<Props>) {
+function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
     const { thumbnailType } = ownProps;
     const localParticipant = getLocalParticipant(state);
     const { disableLocalVideoFlip, disableSelfViewSettings } = state['features/base/config'];

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

@@ -9,9 +9,7 @@ import { IState } from '../../../app/types';
 import { isSupported as isAvModerationSupported } from '../../../av-moderation/functions';
 // @ts-ignore
 import { Avatar } from '../../../base/avatar';
-// @ts-ignore
 import ContextMenu from '../../../base/components/context-menu/ContextMenu';
-// @ts-ignore
 import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
 import { isIosMobileBrowser, isMobileBrowser } from '../../../base/environment/utils';
 import { IconShareVideo } from '../../../base/icons/svg/index';
@@ -161,7 +159,7 @@ const ParticipantContextMenu = ({
     const { remoteVideoMenu = {}, disableRemoteMute, startSilent }
         = useSelector((state: IState) => state['features/base/config']);
     const { disableKick, disableGrantModerator, disablePrivateChat } = remoteVideoMenu;
-    const { participantsVolume } = useSelector((state: any) => state['features/filmstrip']);
+    const { participantsVolume } = useSelector((state: IState) => state['features/filmstrip']);
     const _volume = (participant?.local ?? true ? undefined
         : participant?.id ? participantsVolume[participant?.id] : undefined) ?? 1;
     const isBreakoutRoom = useSelector(isInBreakoutRoom);

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

@@ -4,6 +4,7 @@ import React, { Component } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { batch, connect } from 'react-redux';
 
+import { IState } from '../../../app/types';
 import { isMobileBrowser } from '../../../base/environment/utils';
 // @ts-ignore
 import { translate } from '../../../base/i18n';
@@ -18,8 +19,7 @@ import Button from '../../../base/ui/components/web/Button';
 import ConnectionIndicatorContent from
 // @ts-ignore
     '../../../connection-indicator/components/web/ConnectionIndicatorContent';
-// @ts-ignore
+import { THUMBNAIL_TYPE } from '../../../filmstrip/constants';
-import { THUMBNAIL_TYPE } from '../../../filmstrip';
 // @ts-ignore
 import { renderConnectionStatus } from '../../actions.web';
 
@@ -28,10 +28,6 @@ import ParticipantContextMenu from './ParticipantContextMenu';
 // @ts-ignore
 import { REMOTE_CONTROL_MENU_STATES } from './RemoteControlButton';
 
-
-// eslint-disable-next-line no-var, @typescript-eslint/no-unused-vars
-declare var $: Object;
-
 /**
  * The type of the React {@code Component} props of
  * {@link RemoteVideoMenuTriggerButton}.
@@ -261,7 +257,7 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
  * @private
  * @returns {Props}
  */
-function _mapStateToProps(state: any, ownProps: Partial<Props>) {
+function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
     const { participantID, thumbnailType } = ownProps;
     let _remoteControlState = null;
     const participant = getParticipantById(state, participantID ?? '');

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

@@ -7,6 +7,7 @@ import type { Dispatch } from 'redux';
 
 // @ts-ignore
 import { createToolbarEvent, sendAnalytics } from '../../analytics';
+import { IState } from '../../app/types';
 // @ts-ignore
 import { setAudioOnly } from '../../base/audio-only';
 import { translate } from '../../base/i18n/functions';
@@ -16,7 +17,6 @@ import { connect } from '../../base/redux/functions';
 import { withPixelLineHeight } from '../../base/styles/functions.web';
 // @ts-ignore
 import { setPreferredVideoQuality } from '../actions';
-// @ts-ignore
 import { DEFAULT_LAST_N, VIDEO_QUALITY_LEVELS } from '../constants';
 // @ts-ignore
 import logger from '../logger';
@@ -360,7 +360,7 @@ class VideoQualitySlider extends Component<Props> {
  * @private
  * @returns {Props}
  */
-function _mapStateToProps(state: any) {
+function _mapStateToProps(state: IState) {
     const { enabled: audioOnly } = state['features/base/audio-only'];
     const { p2p } = state['features/base/conference'];
     const { preferredVideoQuality } = state['features/video-quality'];

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

@@ -30,7 +30,8 @@ import { Tooltip } from '../../base/tooltip';
 // @ts-ignore
 import { getLocalVideoTrack } from '../../base/tracks';
 // @ts-ignore
-import { NOTIFICATION_TIMEOUT_TYPE, showErrorNotification } from '../../notifications';
+import { showErrorNotification } from '../../notifications';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../../notifications/constants';
 // @ts-ignore
 import { toggleBackgroundEffect, virtualBackgroundTrackChanged } from '../actions';
 import { IMAGES, BACKGROUNDS_LIMIT, VIRTUAL_BACKGROUND_TYPE, type Image } from '../constants';
@@ -107,7 +108,7 @@ const onError = (event: any) => {
  * @private
  * @returns {{Props}}
  */
-function _mapStateToProps(state: any): Object {
+function _mapStateToProps(state: IState): Object {
     const { localFlipX } = state['features/base/settings'];
     const dynamicBrandingImages = state['features/dynamic-branding'].virtualBackgrounds;
     const hasBrandingImages = Boolean(dynamicBrandingImages.length);