ref(TS) Require interfaces to start with I (#12424)

react/.eslintrc.js

@@ -13,6 +13,19 @@ module.exports = {
             parserOptions: {
                 sourceType: 'module',
                 project: [ './tsconfig.web.json', './tsconfig.native.json' ]
+            },
+            rules: {
+                '@typescript-eslint/naming-convention': [
+                    'error',
+                    {
+                        'selector': 'interface',
+                        'format': [ 'PascalCase' ],
+                        'custom': {
+                            'regex': '^I[A-Z]',
+                            'match': true
+                        }
+                    }
+                ]
             }
         }
     ],

react/features/analytics/handlers/AbstractHandler.ts

@@ -9,7 +9,7 @@ export interface IEvent {
     type?: string;
 }
 
-interface Options {
+interface IOptions {
     amplitudeAPPKey?: string;
     blackListedEvents?: string[];
     envType?: string;
@@ -38,7 +38,7 @@ export default class AbstractHandler {
      *
      * @param {Object} options - Optional parameters.
      */
-    constructor(options: Options = {}) {
+    constructor(options: IOptions = {}) {
         this._enabled = false;
         this._whiteListedEvents = options.whiteListedEvents;
 

react/features/analytics/middleware.ts

@@ -1,4 +1,4 @@
-import { IState } from '../app/types';
+import { IReduxState } from '../app/types';
 import {
     CONFERENCE_JOINED,
     CONFERENCE_WILL_LEAVE,
@@ -27,7 +27,7 @@ import { createHandlers, initAnalytics, resetAnalytics, sendAnalytics } from './
  * @param {Object} state - The redux state.
  * @returns {Object} - The local tracks duration.
  */
-function calculateLocalTrackDuration(state: IState) {
+function calculateLocalTrackDuration(state: IReduxState) {
     const now = Date.now();
     const { localTracksDuration } = state['features/analytics'];
     const { conference } = state['features/base/conference'];

react/features/analytics/reducer.ts

@@ -28,18 +28,18 @@ const DEFAULT_STATE = {
     }
 };
 
-interface Value {
+interface IValue {
     startedTime: number;
     value: number;
 }
 
 export interface IAnalyticsState {
     localTracksDuration: {
-        audio: Value;
+        audio: IValue;
-        conference: Value;
+        conference: IValue;
         video: {
-            camera: Value;
+            camera: IValue;
-            desktop: Value;
+            desktop: IValue;
         };
     };
 }

react/features/app/types.ts

@@ -78,11 +78,11 @@ import { IVirtualBackground } from '../virtual-background/reducer';
 import { IWhiteboardState } from '../whiteboard/reducer';
 
 export interface IStore {
-    dispatch: ThunkDispatch<IState, void, AnyAction>;
+    dispatch: ThunkDispatch<IReduxState, void, AnyAction>;
-    getState: () => IState;
+    getState: () => IReduxState;
 }
 
-export interface IState {
+export interface IReduxState {
     'features/analytics': IAnalyticsState;
     'features/authentication': IAuthenticationState;
     'features/av-moderation': IAVModerationState;

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

@@ -3,7 +3,7 @@ import { WithTranslation } from 'react-i18next';
 
 // @ts-expect-error
 import { connect } from '../../../../../connection';
-import { IState, IStore } from '../../../app/types';
+import { IReduxState, IStore } from '../../../app/types';
 import { IJitsiConference } from '../../../base/conference/reducer';
 import { IConfig } from '../../../base/config/configType';
 import { toJid } from '../../../base/connection/functions';
@@ -20,7 +20,7 @@ import {
 /**
  * The type of the React {@code Component} props of {@link LoginDialog}.
  */
-interface Props extends WithTranslation {
+interface IProps extends WithTranslation {
 
     /**
      * {@link JitsiConference} That needs authentication - will hold a valid
@@ -91,13 +91,13 @@ type State = {
  *
  *  @returns {React$Element<any>}
  */
-class LoginDialog extends Component<Props, State> {
+class LoginDialog extends Component<IProps, State> {
     /**
      * Initializes a new {@code LoginDialog} instance.
      *
      * @inheritdoc
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
@@ -294,9 +294,9 @@ class LoginDialog extends Component<Props, State> {
  *
  * @param {Object} state - The Redux state.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
-function mapStateToProps(state: IState) {
+function mapStateToProps(state: IReduxState) {
     const {
         error: authenticateAndUpgradeRoleError,
         progress,

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

@@ -10,7 +10,7 @@ import { cancelWaitForOwner } from '../../actions.web';
 /**
  * The type of the React {@code Component} props of {@link WaitForOwnerDialog}.
  */
-interface Props extends WithTranslation {
+interface IProps extends WithTranslation {
 
     /**
      * Redux store dispatch method.
@@ -28,14 +28,14 @@ interface Props extends WithTranslation {
  *
  * @returns {React$Element<any>}
  */
-class WaitForOwnerDialog extends PureComponent<Props> {
+class WaitForOwnerDialog extends PureComponent<IProps> {
     /**
      * Instantiates a new component.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this._onCancelWaitForOwner = this._onCancelWaitForOwner.bind(this);

react/features/av-moderation/actions.ts

@@ -2,7 +2,7 @@ import { IStore } from '../app/types';
 import { getConferenceState } from '../base/conference/functions';
 import { MEDIA_TYPE, type MediaType } from '../base/media/constants';
 import { getParticipantById, isParticipantModerator } from '../base/participants/functions';
-import { Participant } from '../base/participants/types';
+import { IParticipant } from '../base/participants/types';
 import { isForceMuted } from '../participants-pane/functions';
 
 import {
@@ -133,10 +133,10 @@ export const disableModeration = (mediaType: MediaType, actor: Object) => {
 /**
  * Hides the notification with the participant that asked to unmute audio.
  *
- * @param {Participant} participant - The participant for which the notification to be hidden.
+ * @param {IParticipant} participant - The participant for which the notification to be hidden.
  * @returns {Object}
  */
-export function dismissPendingAudioParticipant(participant: Participant) {
+export function dismissPendingAudioParticipant(participant: IParticipant) {
     return dismissPendingParticipant(participant.id, MEDIA_TYPE.AUDIO);
 }
 
@@ -270,10 +270,10 @@ export function showModeratedNotification(mediaType: MediaType) {
 /**
  * Shows a notification with the participant that asked to audio unmute.
  *
- * @param {Participant} participant - The participant for which is the notification.
+ * @param {IParticipant} participant - The participant for which is the notification.
  * @returns {Object}
  */
-export function participantPendingAudio(participant: Participant) {
+export function participantPendingAudio(participant: IParticipant) {
     return {
         type: PARTICIPANT_PENDING_AUDIO,
         participant

react/features/av-moderation/functions.ts

@@ -1,7 +1,7 @@
-import { IState } from '../app/types';
+import { IReduxState } from '../app/types';
 import { MEDIA_TYPE, type MediaType } from '../base/media/constants';
 import { isLocalParticipantModerator } from '../base/participants/functions';
-import { Participant } from '../base/participants/types';
+import { IParticipant } from '../base/participants/types';
 import { isInBreakoutRoom } from '../breakout-rooms/functions';
 
 import { MEDIA_TYPE_TO_PENDING_STORE_KEY, MEDIA_TYPE_TO_WHITELIST_STORE_KEY } from './constants';
@@ -9,10 +9,10 @@ import { MEDIA_TYPE_TO_PENDING_STORE_KEY, MEDIA_TYPE_TO_WHITELIST_STORE_KEY } fr
 /**
  * Returns this feature's root state.
  *
- * @param {IState} state - Global state.
+ * @param {IReduxState} state - Global state.
  * @returns {Object} Feature state.
  */
-const getState = (state: IState) => state['features/av-moderation'];
+const getState = (state: IReduxState) => state['features/av-moderation'];
 
 /**
  * We use to construct once the empty array so we can keep the same instance between calls
@@ -26,10 +26,10 @@ const EMPTY_ARRAY: any[] = [];
  * Returns whether moderation is enabled per media type.
  *
  * @param {MEDIA_TYPE} mediaType - The media type to check.
- * @param {IState} state - Global state.
+ * @param {IReduxState} state - Global state.
  * @returns {boolean}
  */
-export const isEnabledFromState = (mediaType: MediaType, state: IState) =>
+export const isEnabledFromState = (mediaType: MediaType, state: IReduxState) =>
     (mediaType === MEDIA_TYPE.AUDIO
         ? getState(state)?.audioModerationEnabled
         : getState(state)?.videoModerationEnabled) === true;
@@ -40,14 +40,14 @@ export const isEnabledFromState = (mediaType: MediaType, state: IState) =>
  * @param {MEDIA_TYPE} mediaType - The media type to check.
  * @returns {boolean}
  */
-export const isEnabled = (mediaType: MediaType) => (state: IState) => isEnabledFromState(mediaType, state);
+export const isEnabled = (mediaType: MediaType) => (state: IReduxState) => isEnabledFromState(mediaType, state);
 
 /**
  * Returns whether moderation is supported by the backend.
  *
  * @returns {boolean}
  */
-export const isSupported = () => (state: IState) => {
+export const isSupported = () => (state: IReduxState) => {
     const { conference } = state['features/base/conference'];
 
     return Boolean(!isInBreakoutRoom(state) && conference?.isAVModerationSupported());
@@ -57,10 +57,10 @@ export const isSupported = () => (state: IState) => {
  * Returns whether local participant is approved to unmute a media type.
  *
  * @param {MEDIA_TYPE} mediaType - The media type to check.
- * @param {IState} state - Global state.
+ * @param {IReduxState} state - Global state.
  * @returns {boolean}
  */
-export const isLocalParticipantApprovedFromState = (mediaType: MediaType, state: IState) => {
+export const isLocalParticipantApprovedFromState = (mediaType: MediaType, state: IReduxState) => {
     const approved = (mediaType === MEDIA_TYPE.AUDIO
         ? getState(state).audioUnmuteApproved
         : getState(state).videoUnmuteApproved) === true;
@@ -75,7 +75,7 @@ export const isLocalParticipantApprovedFromState = (mediaType: MediaType, state:
  * @returns {boolean}
  */
 export const isLocalParticipantApproved = (mediaType: MediaType) =>
-    (state: IState) =>
+    (state: IReduxState) =>
         isLocalParticipantApprovedFromState(mediaType, state);
 
 /**
@@ -85,7 +85,7 @@ export const isLocalParticipantApproved = (mediaType: MediaType) =>
  * @param {MEDIA_TYPE} mediaType - The media type to check.
  * @returns {boolean}
  */
-export const isParticipantApproved = (id: string, mediaType: MediaType) => (state: IState) => {
+export const isParticipantApproved = (id: string, mediaType: MediaType) => (state: IReduxState) => {
     const storeKey = MEDIA_TYPE_TO_WHITELIST_STORE_KEY[mediaType];
 
     const avModerationState = getState(state);
@@ -97,11 +97,11 @@ export const isParticipantApproved = (id: string, mediaType: MediaType) => (stat
 /**
  * Returns a selector creator which determines if the participant is pending or not for a media type.
  *
- * @param {Participant} participant - The participant.
+ * @param {IParticipant} participant - The participant.
  * @param {MEDIA_TYPE} mediaType - The media type to check.
  * @returns {boolean}
  */
-export const isParticipantPending = (participant: Participant, mediaType: MediaType) => (state: IState) => {
+export const isParticipantPending = (participant: IParticipant, mediaType: MediaType) => (state: IReduxState) => {
     const storeKey = MEDIA_TYPE_TO_PENDING_STORE_KEY[mediaType];
     const arr = getState(state)[storeKey];
 
@@ -115,7 +115,7 @@ export const isParticipantPending = (participant: Participant, mediaType: MediaT
  * @param {Object} state - The global state.
  * @returns {Array<Object>}
  */
-export const getParticipantsAskingToAudioUnmute = (state: IState) => {
+export const getParticipantsAskingToAudioUnmute = (state: IReduxState) => {
     if (isLocalParticipantModerator(state)) {
         return getState(state).pendingAudio;
     }
@@ -131,6 +131,6 @@ export const getParticipantsAskingToAudioUnmute = (state: IState) => {
  * @param {Object} state - The global state.
  * @returns {boolean}
  */
-export const shouldShowModeratedNotification = (mediaType: MediaType, state: IState) =>
+export const shouldShowModeratedNotification = (mediaType: MediaType, state: IReduxState) =>
     isEnabledFromState(mediaType, state)
     && !isLocalParticipantApprovedFromState(mediaType, state);

react/features/av-moderation/reducer.ts

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

react/features/base/app/types.ts

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

react/features/base/conference/actions.ts

@@ -2,7 +2,7 @@
 import { createStartMutedConfigurationEvent } from '../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../analytics/functions';
 import { appNavigate } from '../../app/actions';
-import { IState, IStore } from '../../app/types';
+import { IReduxState, IStore } from '../../app/types';
 import { endpointMessageReceived } from '../../subtitles/actions.any';
 import { getReplaceParticipant } from '../config/functions';
 import { disconnect } from '../connection/actions';
@@ -84,7 +84,7 @@ import { IJitsiConference } from './reducer';
  * @private
  * @returns {void}
  */
-function _addConferenceListeners(conference: IJitsiConference, dispatch: IStore['dispatch'], state: IState) {
+function _addConferenceListeners(conference: IJitsiConference, dispatch: IStore['dispatch'], state: IReduxState) {
     // A simple logger for conference errors received through
     // the listener. These errors are not handled now, but logged.
     conference.on(JitsiConferenceEvents.CONFERENCE_ERROR,

react/features/base/conference/functions.ts

@@ -2,7 +2,7 @@ import { sha512_256 as sha512 } from 'js-sha512';
 import _ from 'lodash';
 
 import { getName } from '../../app/functions';
-import { IState, IStore } from '../../app/types';
+import { IReduxState, IStore } from '../../app/types';
 import { determineTranscriptionLanguage } from '../../transcribing/functions';
 import { IStateful } from '../app/types';
 import { JitsiTrackErrors } from '../lib-jitsi-meet';
@@ -29,18 +29,18 @@ import { IJitsiConference } from './reducer';
 /**
  * Returns root conference state.
  *
- * @param {IState} state - Global state.
+ * @param {IReduxState} state - Global state.
  * @returns {Object} Conference state.
  */
-export const getConferenceState = (state: IState) => state['features/base/conference'];
+export const getConferenceState = (state: IReduxState) => state['features/base/conference'];
 
 /**
  * Is the conference joined or not.
  *
- * @param {IState} state - Global state.
+ * @param {IReduxState} state - Global state.
  * @returns {boolean}
  */
-export const getIsConferenceJoined = (state: IState) => Boolean(getConferenceState(state).conference);
+export const getIsConferenceJoined = (state: IReduxState) => Boolean(getConferenceState(state).conference);
 
 /**
  * Attach a set of local tracks to a conference.
@@ -292,21 +292,21 @@ export function getCurrentConference(stateful: IStateful): any {
 /**
  * Returns the stored room name.
  *
- * @param {IState} state - The current state of the app.
+ * @param {IReduxState} state - The current state of the app.
  * @returns {string}
  */
-export function getRoomName(state: IState) {
+export function getRoomName(state: IReduxState) {
     return getConferenceState(state).room;
 }
 
 /**
  * Get an obfuscated room name or create and persist it if it doesn't exists.
  *
- * @param {IState} state - The current state of the app.
+ * @param {IReduxState} state - The current state of the app.
  * @param {Function} dispatch - The Redux dispatch function.
  * @returns {string} - Obfuscated room name.
  */
-export function getOrCreateObfuscatedRoomName(state: IState, dispatch: IStore['dispatch']) {
+export function getOrCreateObfuscatedRoomName(state: IReduxState, dispatch: IStore['dispatch']) {
     let { obfuscatedRoom } = getConferenceState(state);
     const { obfuscatedRoomSource } = getConferenceState(state);
     const room = getRoomName(state);
@@ -330,11 +330,11 @@ export function getOrCreateObfuscatedRoomName(state: IState, dispatch: IStore['d
  * Analytics may require an obfuscated room name, this functions decides based on a config if the normal or
  * obfuscated room name should be returned.
  *
- * @param {IState} state - The current state of the app.
+ * @param {IReduxState} state - The current state of the app.
  * @param {Function} dispatch - The Redux dispatch function.
  * @returns {string} - Analytics room name.
  */
-export function getAnalyticsRoomName(state: IState, dispatch: IStore['dispatch']) {
+export function getAnalyticsRoomName(state: IReduxState, dispatch: IStore['dispatch']) {
     const { analysis: { obfuscateRoomName = false } = {} } = state['features/base/config'];
 
     if (obfuscateRoomName) {

react/features/base/config/functions.any.ts

@@ -5,7 +5,7 @@ import Bourne from '@hapi/bourne';
 import { jitsiLocalStorage } from '@jitsi/js-utils';
 import _ from 'lodash';
 
-import { IState } from '../../app/types';
+import { IReduxState } from '../../app/types';
 import { browser } from '../lib-jitsi-meet';
 import { parseURLParams } from '../util/parseURLParams';
 
@@ -49,7 +49,7 @@ export function createFakeConfig(baseURL: string) {
  * @param {Object} state - The global state.
  * @returns {string}
  */
-export function getMeetingRegion(state: IState) {
+export function getMeetingRegion(state: IReduxState) {
     return state['features/base/config']?.deploymentInfo?.region || '';
 }
 
@@ -59,7 +59,7 @@ export function getMeetingRegion(state: IState) {
  * @param {Object} state - The global state.
  * @returns {boolean}
  */
-export function getMultipleVideoSupportFeatureFlag(state: IState) {
+export function getMultipleVideoSupportFeatureFlag(state: IReduxState) {
     return (getFeatureFlag(state, FEATURE_FLAGS.MULTIPLE_VIDEO_STREAMS_SUPPORT)
         && getSourceNameSignalingFeatureFlag(state)) ?? true;
 }
@@ -70,7 +70,7 @@ export function getMultipleVideoSupportFeatureFlag(state: IState) {
  * @param {Object} state - The global state.
  * @returns {boolean}
  */
-export function getMultipleVideoSendingSupportFeatureFlag(state: IState) {
+export function getMultipleVideoSendingSupportFeatureFlag(state: IReduxState) {
     return navigator.product !== 'ReactNative'
         && ((getMultipleVideoSupportFeatureFlag(state) ?? true) && isUnifiedPlanEnabled(state));
 }
@@ -81,7 +81,7 @@ export function getMultipleVideoSendingSupportFeatureFlag(state: IState) {
  * @param {Object} state - The global state.
  * @returns {boolean}
  */
-export function getSourceNameSignalingFeatureFlag(state: IState) {
+export function getSourceNameSignalingFeatureFlag(state: IReduxState) {
     return getFeatureFlag(state, FEATURE_FLAGS.SOURCE_NAME_SIGNALING) ?? true;
 }
 
@@ -92,7 +92,7 @@ export function getSourceNameSignalingFeatureFlag(state: IState) {
  * @param {string} featureFlag - The name of the feature flag.
  * @returns {boolean}
  */
-export function getFeatureFlag(state: IState, featureFlag: string) {
+export function getFeatureFlag(state: IReduxState, featureFlag: string) {
     const featureFlags = state['features/base/config']?.flags || {};
 
     return featureFlags[featureFlag as keyof typeof featureFlags];
@@ -104,7 +104,7 @@ export function getFeatureFlag(state: IState, featureFlag: string) {
  * @param {Object} state - The global state.
  * @returns {boolean}
  */
-export function getDisableRemoveRaisedHandOnFocus(state: IState) {
+export function getDisableRemoveRaisedHandOnFocus(state: IReduxState) {
     return state['features/base/config']?.disableRemoveRaisedHandOnFocus || false;
 }
 
@@ -114,7 +114,7 @@ export function getDisableRemoveRaisedHandOnFocus(state: IState) {
  * @param {Object} state - The global state.
  * @returns {string}
  */
-export function getRecordingSharingUrl(state: IState) {
+export function getRecordingSharingUrl(state: IReduxState) {
     return state['features/base/config'].recordingSharingUrl;
 }
 
@@ -196,7 +196,7 @@ export function getWhitelistedJSON(configName: 'interfaceConfig' | 'config', con
  * @param {Object} state - The state of the app.
  * @returns {boolean}
  */
-export function isNameReadOnly(state: IState): boolean {
+export function isNameReadOnly(state: IReduxState): boolean {
     return Boolean(state['features/base/config'].disableProfile
         || state['features/base/config'].readOnlyName);
 }
@@ -207,7 +207,7 @@ export function isNameReadOnly(state: IState): boolean {
  * @param {Object} state - The state of the app.
  * @returns {boolean}
  */
-export function isDisplayNameVisible(state: IState): boolean {
+export function isDisplayNameVisible(state: IReduxState): boolean {
     return !state['features/base/config'].hideDisplayName;
 }
 
@@ -217,7 +217,7 @@ export function isDisplayNameVisible(state: IState): boolean {
  * @param {Object} state - The state of the app.
  * @returns {boolean}
  */
-export function isUnifiedPlanEnabled(state: IState): boolean {
+export function isUnifiedPlanEnabled(state: IReduxState): boolean {
     const { enableUnifiedOnChrome = true } = state['features/base/config'];
 
     return browser.supportsUnifiedPlan()

react/features/base/config/functions.native.ts

@@ -1,6 +1,6 @@
 import { NativeModules } from 'react-native';
 
-import { IState } from '../../app/types';
+import { IReduxState } from '../../app/types';
 import { REPLACE_PARTICIPANT } from '../flags/constants';
 import { getFeatureFlag } from '../flags/functions';
 
@@ -32,6 +32,6 @@ export function _cleanupConfig(config: IConfig) {
  * @param {Object} state - The state of the app.
  * @returns {boolean}
  */
-export function getReplaceParticipant(state: IState): string {
+export function getReplaceParticipant(state: IReduxState): string {
     return getFeatureFlag(state, REPLACE_PARTICIPANT, false);
 }

react/features/base/config/functions.web.ts

@@ -1,4 +1,4 @@
-import { IState } from '../../app/types';
+import { IReduxState } from '../../app/types';
 
 import { IConfig } from './configType';
 import { TOOLBAR_BUTTONS } from './constants';
@@ -20,7 +20,7 @@ export function _cleanupConfig(config: IConfig) { // eslint-disable-line @typesc
  * @param {Object} state - The state of the app.
  * @returns {string}
  */
-export function getDialOutStatusUrl(state: IState): string | undefined {
+export function getDialOutStatusUrl(state: IReduxState): string | undefined {
     return state['features/base/config'].guestDialOutStatusUrl;
 }
 
@@ -30,7 +30,7 @@ export function getDialOutStatusUrl(state: IState): string | undefined {
  * @param {Object} state - The state of the app.
  * @returns {string}
  */
-export function getDialOutUrl(state: IState): string | undefined {
+export function getDialOutUrl(state: IReduxState): string | undefined {
     return state['features/base/config'].guestDialOutUrl;
 }
 
@@ -40,7 +40,7 @@ export function getDialOutUrl(state: IState): string | undefined {
  * @param {Object} state - The state of the app.
  * @returns {boolean}
  */
-export function getReplaceParticipant(state: IState): string | undefined {
+export function getReplaceParticipant(state: IReduxState): string | undefined {
     return state['features/base/config'].replaceParticipant;
 }
 
@@ -50,7 +50,7 @@ export function getReplaceParticipant(state: IState): string | undefined {
  * @param {Object} state - The redux state.
  * @returns {Array<string>} - The list of enabled toolbar buttons.
  */
-export function getToolbarButtons(state: IState): Array<string> {
+export function getToolbarButtons(state: IReduxState): Array<string> {
     const { toolbarButtons } = state['features/base/config'];
 
     return Array.isArray(toolbarButtons) ? toolbarButtons : TOOLBAR_BUTTONS;
@@ -64,7 +64,7 @@ export function getToolbarButtons(state: IState): Array<string> {
  * @param {Object|Array<string>} state - The redux state or the array with the enabled buttons.
  * @returns {boolean} - True if the button is enabled and false otherwise.
  */
-export function isToolbarButtonEnabled(buttonName: string, state: IState | Array<string>) {
+export function isToolbarButtonEnabled(buttonName: string, state: IReduxState | Array<string>) {
     const buttons = Array.isArray(state) ? state : getToolbarButtons(state);
 
     return buttons.includes(buttonName);
@@ -76,7 +76,7 @@ export function isToolbarButtonEnabled(buttonName: string, state: IState | Array
  * @param {Object} state - The state of the app.
  * @returns {boolean}
  */
-export function areAudioLevelsEnabled(state: IState): boolean {
+export function areAudioLevelsEnabled(state: IReduxState): boolean {
     // Default to false for React Native as audio levels are of no interest to the mobile app.
     return navigator.product !== 'ReactNative' && !state['features/base/config'].disableAudioLevels;
 }

react/features/base/connection/actions.any.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 
-import { IState } from '../../app/types';
+import { IReduxState } from '../../app/types';
 import {
     appendURLParam,
     getBackendSafeRoomName,
@@ -140,7 +140,7 @@ export function connectionFailed(
  * @returns {Object} The options to be passed to the constructor of
  * {@code JitsiConnection}.
  */
-export function constructOptions(state: IState) {
+export function constructOptions(state: IReduxState) {
     // Deep clone the options to make sure we don't modify the object in the
     // redux store.
     const options = _.cloneDeep(state['features/base/config']);

react/features/base/devices/functions.ts

@@ -1,4 +1,4 @@
-import { IState } from '../../app/types';
+import { IReduxState } from '../../app/types';
 import JitsiMeetJS from '../lib-jitsi-meet';
 import { updateSettings } from '../settings/actions';
 import { ISettingsState } from '../settings/reducer';
@@ -24,7 +24,7 @@ const webrtcKindToJitsiKindTranslator = {
  * @returns {boolean} - True if the labels are already initialized and false
  * otherwise.
  */
-export function areDeviceLabelsInitialized(state: IState) {
+export function areDeviceLabelsInitialized(state: IReduxState) {
     // TODO: Replace with something that doesn't use APP when the conference.js logic is reactified.
     if (APP.conference._localTracksInitialized) {
         return true;
@@ -60,7 +60,7 @@ export function getAudioOutputDeviceId() {
  * of the preceding types.
  * @returns {string|undefined}
  */
-export function getDefaultDeviceId(state: IState, kind: string) {
+export function getDefaultDeviceId(state: IReduxState, kind: string) {
     const kindToSearch = webrtcKindToJitsiKindTranslator[kind as keyof typeof webrtcKindToJitsiKindTranslator] || kind;
     const availableDevices = state['features/base/devices'].availableDevices;
     const defaultDevice = (availableDevices[kindToSearch as keyof typeof availableDevices] || [])
@@ -85,7 +85,7 @@ export function getDefaultDeviceId(state: IState, kind: string) {
  * of the preceding types.
  * @returns {string|undefined}
  */
-export function getDeviceIdByLabel(state: IState, label: string, kind: string) {
+export function getDeviceIdByLabel(state: IReduxState, label: string, kind: string) {
     const kindToSearch = webrtcKindToJitsiKindTranslator[kind as keyof typeof webrtcKindToJitsiKindTranslator] || kind;
 
     const availableDevices = state['features/base/devices'].availableDevices;
@@ -108,7 +108,7 @@ export function getDeviceIdByLabel(state: IState, label: string, kind: string) {
  * of the preceding types.
  * @returns {string|undefined}
  */
-export function getDeviceLabelById(state: IState, id: string, kind: string) {
+export function getDeviceLabelById(state: IReduxState, id: string, kind: string) {
     const kindToSearch = webrtcKindToJitsiKindTranslator[kind as keyof typeof webrtcKindToJitsiKindTranslator] || kind;
 
     const availableDevices = state['features/base/devices'].availableDevices;
@@ -127,7 +127,7 @@ export function getDeviceLabelById(state: IState, id: string, kind: string) {
  * @param {Object} state - The redux state.
  * @returns {Object|undefined}
  */
-export function getDevicesFromURL(state: IState) {
+export function getDevicesFromURL(state: IReduxState) {
     const urlParams
         = parseURLParams(state['features/base/connection'].locationURL ?? '');
 
@@ -204,7 +204,7 @@ export function formatDeviceLabel(label: string) {
  * @param {Object} state - The state of the application.
  * @returns {Object[]}
  */
-export function getAudioInputDeviceData(state: IState) {
+export function getAudioInputDeviceData(state: IReduxState) {
     return state['features/base/devices'].availableDevices.audioInput?.map(
         ({ deviceId, label }) => {
             return {
@@ -220,7 +220,7 @@ export function getAudioInputDeviceData(state: IState) {
  * @param {Object} state - The state of the application.
  * @returns {Object[]}
  */
-export function getAudioOutputDeviceData(state: IState) {
+export function getAudioOutputDeviceData(state: IReduxState) {
     return state['features/base/devices'].availableDevices.audioOutput?.map(
         ({ deviceId, label }) => {
             return {
@@ -236,7 +236,7 @@ export function getAudioOutputDeviceData(state: IState) {
  * @param {Object} state - The state of the application.
  * @returns {string[]}
  */
-export function getVideoDeviceIds(state: IState) {
+export function getVideoDeviceIds(state: IReduxState) {
     return state['features/base/devices'].availableDevices.videoInput?.map(({ deviceId }) => deviceId);
 }
 
@@ -248,7 +248,7 @@ export function getVideoDeviceIds(state: IState) {
  *
  * @returns {boolean}
  */
-export function hasAvailableDevices(state: IState, type: string) {
+export function hasAvailableDevices(state: IReduxState, type: string) {
     if (state['features/base/devices'] === undefined) {
         return true;
     }

react/features/base/dialog/components/AbstractDialogContainer.ts

@@ -1,12 +1,12 @@
 import React, { Component, ComponentType } from 'react';
 
-import { IState } from '../../../app/types';
+import { IReduxState } from '../../../app/types';
-import { ReactionEmojiProps } from '../../../reactions/constants';
+import { IReactionEmojiProps } from '../../../reactions/constants';
 
 /**
  * The type of the React {@code Component} props of {@link DialogContainer}.
  */
-interface Props {
+interface IProps {
 
     /**
      * The component to render.
@@ -21,7 +21,7 @@ interface Props {
     /**
      * Array of reactions to be displayed.
      */
-    _reactionsQueue: Array<ReactionEmojiProps>;
+    _reactionsQueue: Array<IReactionEmojiProps>;
 
     /**
      * True if the UI is in a compact state where we don't show dialogs.
@@ -32,7 +32,7 @@ interface Props {
 /**
  * Implements a DialogContainer responsible for showing all dialogs.
  */
-export default class AbstractDialogContainer extends Component<Props> {
+export default class AbstractDialogContainer extends Component<IProps> {
     /**
      * Returns the dialog to be displayed.
      *
@@ -58,9 +58,9 @@ export default class AbstractDialogContainer extends Component<Props> {
  *
  * @param {Object} state - The redux state.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
-export function abstractMapStateToProps(state: IState) {
+export function abstractMapStateToProps(state: IReduxState) {
     const stateFeaturesBaseDialog = state['features/base/dialog'];
     const { reducedUI } = state['features/base/responsive-ui'];
 

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

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

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

@@ -34,7 +34,7 @@ const TitleIcon = ({ appearance }: { appearance?: 'danger' | 'warning'; }) => {
     );
 };
 
-interface Props extends WithTranslation {
+interface IProps extends WithTranslation {
     appearance?: 'danger' | 'warning';
     classes: any;
     heading: string;
@@ -84,9 +84,9 @@ const styles = (theme: Theme) => {
  * A default header for modal-dialog components.
  *
  * @class ModalHeader
- * @augments {React.Component<Props>}
+ * @augments {React.Component<IProps>}
  */
-class ModalHeader extends React.Component<Props> {
+class ModalHeader extends React.Component<IProps> {
     static defaultProps = {
         isHeadingMultiline: true
     };
@@ -97,7 +97,7 @@ class ModalHeader extends React.Component<Props> {
      * @param {*} props - The read-only properties with which the new instance
      * is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         // Bind event handler so it is only bound once for every instance.

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

@@ -31,7 +31,7 @@ const OK_BUTTON_ID = 'modal-dialog-ok-button';
  *
  * @static
  */
-interface Props extends DialogProps, WithTranslation {
+interface IProps extends DialogProps, WithTranslation {
 
     /**
      * An object containing the CSS classes.
@@ -127,7 +127,7 @@ const styles = (theme: Theme) => {
 /**
  * Web dialog that uses atlaskit modal-dialog to display dialogs.
  */
-class StatelessDialog extends Component<Props> {
+class StatelessDialog extends Component<IProps> {
     static defaultProps = {
         hideCloseIconButton: false
     };
@@ -138,7 +138,7 @@ class StatelessDialog extends Component<Props> {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         // Bind event handlers so they are only bound once for every instance.

react/features/base/dialog/functions.ts

@@ -1,6 +1,6 @@
 import { ComponentType } from 'react';
 
-import { IState } from '../../app/types';
+import { IReduxState } from '../../app/types';
 import { IStateful } from '../app/types';
 // eslint-disable-next-line lines-around-comment
 // @ts-ignore
@@ -35,12 +35,12 @@ export function isDialogOpen(stateful: IStateful, component: ComponentType) {
 /**
  * Maps part of the Redux state to the props of any Dialog based component.
  *
- * @param {IState} state - The Redux state.
+ * @param {IReduxState} state - The Redux state.
  * @returns {{
  *     _dialogStyles: StyleType
  * }}
  */
-export function _abstractMapStateToProps(state: IState) {
+export function _abstractMapStateToProps(state: IReduxState) {
     return {
         _dialogStyles: ColorSchemeRegistry.get(state, 'Dialog')
     };

react/features/base/jwt/functions.ts

@@ -1,7 +1,7 @@
 // @ts-ignore
 import jwtDecode from 'jwt-decode';
 
-import { IState } from '../../app/types';
+import { IReduxState } from '../../app/types';
 import { getLocalParticipant } from '../participants/functions';
 import { parseURLParams } from '../util/parseURLParams';
 
@@ -24,10 +24,10 @@ export function parseJWTFromURLParams(url: URL | Location = window.location) {
 /**
  * Returns the user name after decoding the jwt.
  *
- * @param {IState} state - The app state.
+ * @param {IReduxState} state - The app state.
  * @returns {string}
  */
-export function getJwtName(state: IState) {
+export function getJwtName(state: IReduxState) {
     const { user } = state['features/base/jwt'];
 
     return user?.name;
@@ -36,13 +36,13 @@ export function getJwtName(state: IState) {
 /**
  * Check if the given JWT feature is enabled.
  *
- * @param {IState} state - The app state.
+ * @param {IReduxState} state - The app state.
  * @param {string} feature - The feature we want to check.
  * @param {boolean} ifNoToken - Default value if there is no token.
  * @param {boolean} ifNotInFeatures - Default value if features prop exists but does not have the {@code feature}.
  * @returns {bolean}
  */
-export function isJwtFeatureEnabled(state: IState, feature: string, ifNoToken = false, ifNotInFeatures = false) {
+export function isJwtFeatureEnabled(state: IReduxState, feature: string, ifNoToken = false, ifNotInFeatures = false) {
     const { jwt } = state['features/base/jwt'];
 
     if (!jwt) {

react/features/base/jwt/middleware.ts

@@ -7,7 +7,7 @@ import { SET_CONFIG } from '../config/actionTypes';
 import { SET_LOCATION_URL } from '../connection/actionTypes';
 import { participantUpdated } from '../participants/actions';
 import { getLocalParticipant } from '../participants/functions';
-import { Participant } from '../participants/types';
+import { IParticipant } from '../participants/types';
 import MiddlewareRegistry from '../redux/MiddlewareRegistry';
 
 import { SET_JWT } from './actionTypes';
@@ -56,7 +56,7 @@ function _overwriteLocalParticipant(
 
     if ((avatarURL || email || name)
             && (localParticipant = getLocalParticipant(getState))) {
-        const newProperties: Participant = {
+        const newProperties: IParticipant = {
             id: localParticipant.id,
             local: true
         };
@@ -191,7 +191,7 @@ function _undoOverwriteLocalParticipant(
 
     if ((avatarURL || name || email)
             && (localParticipant = getLocalParticipant(getState))) {
-        const newProperties: Participant = {
+        const newProperties: IParticipant = {
             id: localParticipant.id,
             local: true
         };

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

@@ -6,7 +6,7 @@ import Icon from '../../../icons/components/Icon';
 import { withPixelLineHeight } from '../../../styles/functions.web';
 import { COLORS } from '../../constants';
 
-interface Props {
+interface IProps {
 
     /**
      * Own CSS class name.
@@ -89,7 +89,7 @@ const Label = ({
     id,
     onClick,
     text
-}: Props) => {
+}: IProps) => {
     const { classes, cx } = useStyles();
 
     return (

react/features/base/media/subscriber.ts

@@ -1,4 +1,4 @@
-import { IState, IStore } from '../../app/types';
+import { IReduxState, IStore } from '../../app/types';
 import StateListenerRegistry from '../redux/StateListenerRegistry';
 
 
@@ -8,7 +8,7 @@ declare let APP: any;
  * Notifies when the local audio mute state changes.
  */
 StateListenerRegistry.register(
-    /* selector */ (state: IState) => state['features/base/media'].audio.muted,
+    /* selector */ (state: IReduxState) => state['features/base/media'].audio.muted,
     /* listener */ (muted: boolean, store: IStore, previousMuted: boolean) => {
         if (typeof APP !== 'object') {
             return;

react/features/base/net-info/selectors.ts

@@ -1,13 +1,13 @@
-import { IState } from '../../app/types';
+import { IReduxState } from '../../app/types';
 
 import { STORE_NAME } from './constants';
 
 /**
  * A selector for the internet online status.
  *
- * @param {IState} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {boolean}
  */
-export function isOnline(state: IState) {
+export function isOnline(state: IReduxState) {
     return state[STORE_NAME].isOnline;
 }

react/features/base/participants/actions.ts

@@ -36,7 +36,7 @@ import {
     getVirtualScreenshareParticipantOwnerId
 } from './functions';
 import logger from './logger';
-import { FakeParticipant, Participant } from './types';
+import { FakeParticipant, IParticipant } from './types';
 
 /**
  * Create an action for when dominant speaker changes.
@@ -153,13 +153,13 @@ export function localParticipantIdChanged(id: string) {
 /**
  * Action to signal that a local participant has joined.
  *
- * @param {Participant} participant={} - Information about participant.
+ * @param {IParticipant} participant={} - Information about participant.
  * @returns {{
  *     type: PARTICIPANT_JOINED,
- *     participant: Participant
+ *     participant: IParticipant
  * }}
  */
-export function localParticipantJoined(participant: Participant = { id: '' }) {
+export function localParticipantJoined(participant: IParticipant = { id: '' }) {
     return participantJoined(set(participant, 'local', true));
 }
 
@@ -254,13 +254,13 @@ export function participantConnectionStatusChanged(id: string, connectionStatus:
 /**
  * Action to signal that a participant has joined.
  *
- * @param {Participant} participant - Information about participant.
+ * @param {IParticipant} participant - Information about participant.
  * @returns {{
  *     type: PARTICIPANT_JOINED,
- *     participant: Participant
+ *     participant: IParticipant
  * }}
  */
-export function participantJoined(participant: Participant) {
+export function participantJoined(participant: IParticipant) {
     // Only the local participant is not identified with an id-conference pair.
     if (participant.local) {
         return {
@@ -304,7 +304,7 @@ export function participantJoined(participant: Participant) {
  * @param {JitsiParticipant} jitsiParticipant - The ID of the participant.
  * @returns {{
 *     type: PARTICIPANT_UPDATED,
-*     participant: Participant
+*     participant: IParticipant
 * }}
 */
 export function updateRemoteParticipantFeatures(jitsiParticipant: any) {
@@ -471,16 +471,16 @@ export function screenshareParticipantDisplayNameChanged(id: string, name: strin
 /**
  * Action to signal that some of participant properties has been changed.
  *
- * @param {Participant} participant={} - Information about participant. To
+ * @param {IParticipant} participant={} - Information about participant. To
  * identify the participant the object should contain either property id with
  * value the id of the participant or property local with value true (if the
  * local participant hasn't joined the conference yet).
  * @returns {{
  *     type: PARTICIPANT_UPDATED,
- *     participant: Participant
+ *     participant: IParticipant
  * }}
  */
-export function participantUpdated(participant: Participant = { id: '' }) {
+export function participantUpdated(participant: IParticipant = { id: '' }) {
     const participantToUpdate = {
         ...participant
     };
@@ -645,7 +645,7 @@ export function raiseHand(enabled: boolean) {
  *      participant: Object
  * }}
  */
-export function raiseHandUpdateQueue(participant: Participant) {
+export function raiseHandUpdateQueue(participant: IParticipant) {
     return {
         type: RAISE_HAND_UPDATED,
         participant
@@ -689,7 +689,7 @@ export function overwriteParticipantName(id: string, name: string) {
  * @param {Array<Object>} participantList - The list of participants to overwrite.
  * @returns {Object}
  */
-export function overwriteParticipantsNames(participantList: Participant[]) {
+export function overwriteParticipantsNames(participantList: IParticipant[]) {
     return {
         type: OVERWRITE_PARTICIPANTS_NAMES,
         participantList

react/features/base/participants/functions.ts

@@ -2,7 +2,7 @@
 // @ts-ignore
 import { getGravatarURL } from '@jitsi/js-utils/avatar';
 
-import { IState, IStore } from '../../app/types';
+import { IReduxState, IStore } from '../../app/types';
 // @ts-ignore
 import { isStageFilmstripAvailable } from '../../filmstrip/functions';
 import { IStateful } from '../app/types';
@@ -23,7 +23,7 @@ import {
 } from './constants';
 // @ts-ignore
 import { preloadImage } from './preloadImage';
-import { FakeParticipant, Participant } from './types';
+import { FakeParticipant, IParticipant } from './types';
 
 /**
  * Temp structures for avatar urls to be checked/preloaded.
@@ -32,16 +32,16 @@ const AVATAR_QUEUE: Object[] = [];
 const AVATAR_CHECKED_URLS = new Map();
 /* eslint-disable arrow-body-style, no-unused-vars */
 const AVATAR_CHECKER_FUNCTIONS = [
-    (participant: Participant) => {
+    (participant: IParticipant) => {
         return isJigasiParticipant(participant) ? JIGASI_PARTICIPANT_ICON : null;
     },
-    (participant: Participant) => {
+    (participant: IParticipant) => {
         return isWhiteboardParticipant(participant) ? WHITEBOARD_PARTICIPANT_ICON : null;
     },
-    (participant: Participant) => {
+    (participant: IParticipant) => {
         return participant?.avatarURL ? participant.avatarURL : null;
     },
-    (participant: Participant, store: IStore) => {
+    (participant: IParticipant, store: IStore) => {
         const config = store.getState()['features/base/config'];
         const isGravatarDisabled = config.gravatar?.disabled;
 
@@ -132,7 +132,7 @@ export function getActiveSpeakersToBeDisplayed(stateful: IStateful) {
  * @param {Store} store - Redux store.
  * @returns {Promise}
  */
-export function getFirstLoadableAvatarUrl(participant: Participant, store: IStore) {
+export function getFirstLoadableAvatarUrl(participant: IParticipant, store: IStore) {
     const deferred: any = createDeferred();
     const fullPromise = deferred.promise
         .then(() => _getFirstLoadableAvatarUrl(participant, store))
@@ -162,7 +162,7 @@ export function getFirstLoadableAvatarUrl(participant: Participant, store: IStor
  * @param {(Function|Object)} stateful - The (whole) redux state, or redux's
  * {@code getState} function to be used to retrieve the state
  * features/base/participants.
- * @returns {(Participant|undefined)}
+ * @returns {(IParticipant|undefined)}
  */
 export function getLocalParticipant(stateful: IStateful) {
     const state = toState(stateful)['features/base/participants'];
@@ -175,7 +175,7 @@ export function getLocalParticipant(stateful: IStateful) {
  *
  * @param {(Function|Object)} stateful - The (whole) redux state, or redux's
  * {@code getState} function to be used to retrieve the state features/base/participants.
- * @returns {(Participant|undefined)}
+ * @returns {(IParticipant|undefined)}
  */
 export function getLocalScreenShareParticipant(stateful: IStateful) {
     const state = toState(stateful)['features/base/participants'];
@@ -189,7 +189,7 @@ export function getLocalScreenShareParticipant(stateful: IStateful) {
  * @param {(Function|Object)} stateful - The (whole) redux state, or redux's {@code getState} function to be used to
  * retrieve the state features/base/participants.
  * @param {string} id - The owner ID of the screenshare participant to retrieve.
- * @returns {(Participant|undefined)}
+ * @returns {(IParticipant|undefined)}
  */
 export function getVirtualScreenshareParticipantByOwnerId(stateful: IStateful, id: string) {
     const state = toState(stateful);
@@ -226,9 +226,9 @@ export function getNormalizedDisplayName(name: string) {
  * features/base/participants.
  * @param {string} id - The ID of the participant to retrieve.
  * @private
- * @returns {(Participant|undefined)}
+ * @returns {(IParticipant|undefined)}
  */
-export function getParticipantById(stateful: IStateful, id: string): Participant | undefined {
+export function getParticipantById(stateful: IStateful, id: string): IParticipant | undefined {
     const state = toState(stateful)['features/base/participants'];
     const { local, localScreenShare, remote } = state;
 
@@ -245,7 +245,7 @@ export function getParticipantById(stateful: IStateful, id: string): Participant
  * {@code getState} function to be used to retrieve the state
  * features/base/participants.
  * @param {string|undefined} [participantID] - An optional partipantID argument.
- * @returns {Participant|undefined}
+ * @returns {IParticipant|undefined}
  */
 export function getParticipantByIdOrUndefined(stateful: IStateful, participantID?: string) {
     return participantID ? getParticipantById(stateful, participantID) : getLocalParticipant(stateful);
@@ -294,7 +294,7 @@ export function getVirtualScreenshareParticipantOwnerId(id: string) {
  * @param {(Function|Object)} stateful - The (whole) redux state, or redux's
  * {@code getState} function to be used to retrieve the state
  * features/base/participants.
- * @returns {Map<string, Participant>} - The Map with fake participants.
+ * @returns {Map<string, IParticipant>} - The Map with fake participants.
  */
 export function getFakeParticipants(stateful: IStateful) {
     return toState(stateful)['features/base/participants'].fakeParticipants;
@@ -303,41 +303,41 @@ export function getFakeParticipants(stateful: IStateful) {
 /**
  * Returns whether the fake participant is Jigasi.
  *
- * @param {Participant|undefined} participant - The participant entity.
+ * @param {IParticipant|undefined} participant - The participant entity.
  * @returns {boolean} - True if it's a Jigasi participant.
  */
-function isJigasiParticipant(participant?: Participant): boolean {
+function isJigasiParticipant(participant?: IParticipant): boolean {
     return participant?.fakeParticipant === FakeParticipant.Jigasi;
 }
 
 /**
  * Returns whether the fake participant is a local screenshare.
  *
- * @param {Participant|undefined} participant - The participant entity.
+ * @param {IParticipant|undefined} participant - The participant entity.
  * @returns {boolean} - True if it's a local screenshare participant.
  */
-export function isLocalScreenshareParticipant(participant?: Participant): boolean {
+export function isLocalScreenshareParticipant(participant?: IParticipant): boolean {
     return participant?.fakeParticipant === FakeParticipant.LocalScreenShare;
 }
 
 /**
  * Returns whether the fake participant is a remote screenshare.
  *
- * @param {Participant|undefined} participant - The participant entity.
+ * @param {IParticipant|undefined} participant - The participant entity.
  * @returns {boolean} - True if it's a remote screenshare participant.
  */
-export function isRemoteScreenshareParticipant(participant?: Participant): boolean {
+export function isRemoteScreenshareParticipant(participant?: IParticipant): boolean {
     return participant?.fakeParticipant === FakeParticipant.RemoteScreenShare;
 }
 
 /**
  * Returns whether the fake participant is of local or virtual screenshare type.
  *
- * @param {IState} state - The (whole) redux state, or redux's.
+ * @param {IReduxState} state - The (whole) redux state, or redux's.
  * @param {string|undefined} participantId - The participant id.
  * @returns {boolean} - True if it's one of the two.
  */
-export function isScreenShareParticipantById(state: IState, participantId?: string): boolean {
+export function isScreenShareParticipantById(state: IReduxState, participantId?: string): boolean {
     const participant = getParticipantByIdOrUndefined(state, participantId);
 
     return isScreenShareParticipant(participant);
@@ -346,30 +346,30 @@ export function isScreenShareParticipantById(state: IState, participantId?: stri
 /**
  * Returns whether the fake participant is of local or virtual screenshare type.
  *
- * @param {Participant|undefined} participant - The participant entity.
+ * @param {IParticipant|undefined} participant - The participant entity.
  * @returns {boolean} - True if it's one of the two.
  */
-export function isScreenShareParticipant(participant?: Participant): boolean {
+export function isScreenShareParticipant(participant?: IParticipant): boolean {
     return isLocalScreenshareParticipant(participant) || isRemoteScreenshareParticipant(participant);
 }
 
 /**
  * Returns whether the (fake) participant is a shared video.
  *
- * @param {Participant|undefined} participant - The participant entity.
+ * @param {IParticipant|undefined} participant - The participant entity.
  * @returns {boolean} - True if it's a shared video participant.
  */
-export function isSharedVideoParticipant(participant?: Participant): boolean {
+export function isSharedVideoParticipant(participant?: IParticipant): boolean {
     return participant?.fakeParticipant === FakeParticipant.SharedVideo;
 }
 
 /**
  * Returns whether the fake participant is a whiteboard.
  *
- * @param {Participant|undefined} participant - The participant entity.
+ * @param {IParticipant|undefined} participant - The participant entity.
  * @returns {boolean} - True if it's a whiteboard participant.
  */
-export function isWhiteboardParticipant(participant?: Participant): boolean {
+export function isWhiteboardParticipant(participant?: IParticipant): boolean {
     return participant?.fakeParticipant === FakeParticipant.Whiteboard;
 }
 
@@ -501,7 +501,7 @@ export function getParticipantPresenceStatus(stateful: IStateful, id: string) {
  * features/base/participants.
  * @returns {Map<string, Object>}
  */
-export function getRemoteParticipants(stateful: IStateful): Map<string, Participant> {
+export function getRemoteParticipants(stateful: IStateful): Map<string, IParticipant> {
     return toState(stateful)['features/base/participants'].remote;
 }
 
@@ -522,7 +522,7 @@ export function getRemoteParticipantsSorted(stateful: IStateful) {
  * @param {(Function|Object)} stateful - The (whole) redux state, or redux's
  * {@code getState} function to be used to retrieve the state
  * features/base/participants.
- * @returns {(Participant|undefined)}
+ * @returns {(IParticipant|undefined)}
  */
 export function getPinnedParticipant(stateful: IStateful) {
     const state = toState(stateful);
@@ -549,7 +549,7 @@ export function getPinnedParticipant(stateful: IStateful) {
  * @param {string} participant - Participant object.
  * @returns {boolean}
  */
-export function isParticipantModerator(participant?: Participant) {
+export function isParticipantModerator(participant?: IParticipant) {
     return participant?.role === PARTICIPANT_ROLE.MODERATOR;
 }
 
@@ -558,7 +558,7 @@ export function isParticipantModerator(participant?: Participant) {
  *
  * @param {(Function|Object)} stateful - The (whole) redux state or redux's
  * {@code getState} function to be used to retrieve the state features/base/participants.
- * @returns {Participant} - The participant from the redux store.
+ * @returns {IParticipant} - The participant from the redux store.
  */
 export function getDominantSpeakerParticipant(stateful: IStateful) {
     const state = toState(stateful)['features/base/participants'];
@@ -621,7 +621,7 @@ export function isLocalParticipantModerator(stateful: IStateful) {
  * @param {Store} store - Redux store.
  * @returns {?string}
  */
-async function _getFirstLoadableAvatarUrl(participant: Participant, store: IStore) {
+async function _getFirstLoadableAvatarUrl(participant: IParticipant, store: IStore) {
     for (let i = 0; i < AVATAR_CHECKER_FUNCTIONS.length; i++) {
         const url = AVATAR_CHECKER_FUNCTIONS[i](participant, store);
 
@@ -683,6 +683,6 @@ export function getRaiseHandsQueue(stateful: IStateful): Array<{ id: string; rai
  * @param {Object} participant - The participant.
  * @returns {boolean} - Whether participant has raise hand or not.
  */
-export function hasRaisedHand(participant?: Participant): boolean {
+export function hasRaisedHand(participant?: IParticipant): boolean {
     return Boolean(participant?.raisedHandTimestamp);
 }

react/features/base/participants/reducer.ts

@@ -23,7 +23,7 @@ import {
     isRemoteScreenshareParticipant,
     isScreenShareParticipant
 } from './functions';
-import { LocalParticipant, Participant } from './types';
+import { ILocalParticipant, IParticipant } from './types';
 
 /**
  * Participant object.
@@ -81,13 +81,13 @@ const DEFAULT_STATE = {
 export interface IParticipantsState {
     dominantSpeaker?: string;
     everyoneIsModerator: boolean;
-    fakeParticipants: Map<string, Participant>;
+    fakeParticipants: Map<string, IParticipant>;
-    local?: LocalParticipant;
+    local?: ILocalParticipant;
-    localScreenShare?: Participant;
+    localScreenShare?: IParticipant;
     overwrittenNameList: { [id: string]: string; };
     pinnedParticipant?: string;
     raisedHandsQueue: Array<{ id: string; raisedHandTimestamp: number; }>;
-    remote: Map<string, Participant>;
+    remote: Map<string, IParticipant>;
     sortedRemoteParticipants: Map<string, string>;
     sortedRemoteScreenshares: Map<string, string>;
     sortedRemoteVirtualScreenshareParticipants: Map<string, string>;
@@ -98,12 +98,12 @@ export interface IParticipantsState {
  * Listen for actions which add, remove, or update the set of participants in
  * the conference.
  *
- * @param {Participant[]} state - List of participants to be modified.
+ * @param {IParticipant[]} state - List of participants to be modified.
  * @param {Object} action - Action object.
  * @param {string} action.type - Type of action.
- * @param {Participant} action.participant - Information about participant to be
+ * @param {IParticipant} action.participant - Information about participant to be
  * added/removed/modified.
- * @returns {Participant[]}
+ * @returns {IParticipant[]}
  */
 ReducerRegistry.register<IParticipantsState>('features/base/participants',
 (state = DEFAULT_STATE, action): IParticipantsState => {
@@ -200,7 +200,7 @@ ReducerRegistry.register<IParticipantsState>('features/base/participants',
             id = LOCAL_PARTICIPANT_DEFAULT_ID;
         }
 
-        let newParticipant: Participant | null = null;
+        let newParticipant: IParticipant | null = null;
 
         if (state.remote.has(id)) {
             newParticipant = _participant(state.remote.get(id), action);
@@ -462,16 +462,17 @@ function _isEveryoneModerator(state: IParticipantsState) {
 /**
  * Reducer function for a single participant.
  *
- * @param {Participant|undefined} state - Participant to be modified.
+ * @param {IParticipant|undefined} state - Participant to be modified.
  * @param {Object} action - Action object.
  * @param {string} action.type - Type of action.
- * @param {Participant} action.participant - Information about participant to be
+ * @param {IParticipant} action.participant - Information about participant to be
  * added/modified.
  * @param {JitsiConference} action.conference - Conference instance.
  * @private
- * @returns {Participant}
+ * @returns {IParticipant}
  */
-function _participant(state: Participant | LocalParticipant = { id: '' }, action: any): Participant | LocalParticipant {
+function _participant(state: IParticipant | ILocalParticipant = { id: '' },
+        action: any): IParticipant | ILocalParticipant {
     switch (action.type) {
     case SET_LOADABLE_AVATAR_URL:
     case PARTICIPANT_UPDATED: {
@@ -507,7 +508,7 @@ function _participant(state: Participant | LocalParticipant = { id: '' }, action
  * base/participants after the reduction of the specified
  * {@code action}.
  */
-function _participantJoined({ participant }: { participant: Participant; }) {
+function _participantJoined({ participant }: { participant: IParticipant; }) {
     const {
         avatarURL,
         botType,
@@ -572,18 +573,18 @@ function _updateParticipantProperty(state: IParticipantsState, id: string, prope
         remote.set(id, set(remote.get(id) ?? {
             id: '',
             name: ''
-        }, property as keyof Participant, value));
+        }, property as keyof IParticipant, value));
 
         return true;
     } else if (local?.id === id || local?.id === 'local') {
         // The local participant's ID can chance from something to "local" when
         // not in a conference.
-        state.local = set(local, property as keyof LocalParticipant, value);
+        state.local = set(local, property as keyof ILocalParticipant, value);
 
         return true;
 
     } else if (localScreenShare?.id === id) {
-        state.localScreenShare = set(localScreenShare, property as keyof Participant, value);
+        state.localScreenShare = set(localScreenShare, property as keyof IParticipant, value);
 
         return true;
     }

react/features/base/participants/types.ts

@@ -6,7 +6,7 @@ export enum FakeParticipant {
     Whiteboard = 'Whiteboard'
 }
 
-export interface Participant {
+export interface IParticipant {
     avatarURL?: string;
     botType?: string;
     conference?: Object;
@@ -39,7 +39,7 @@ export interface Participant {
     supportsRemoteControl?: boolean;
 }
 
-export interface LocalParticipant extends Participant {
+export interface ILocalParticipant extends IParticipant {
     audioOutputDeviceId?: string;
     cameraDeviceId?: string;
     jwtId?: string;

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

@@ -3,7 +3,7 @@ import React, { useCallback, useState } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import { IState } from '../../../../app/types';
+import { IReduxState } from '../../../../app/types';
 import { translate } from '../../../i18n/functions';
 import Icon from '../../../icons/components/Icon';
 import { IconArrowDownSmall, IconWifi1Bar, IconWifi2Bars, IconWifi3Bars } from '../../../icons/svg';
@@ -12,7 +12,7 @@ import { PREJOIN_DEFAULT_CONTENT_WIDTH } from '../../../ui/components/variables'
 import { CONNECTION_TYPE } from '../../constants';
 import { getConnectionData } from '../../functions';
 
-interface Props extends WithTranslation {
+interface IProps extends WithTranslation {
 
     /**
      * List of strings with details about the connection.
@@ -145,10 +145,10 @@ const CONNECTION_TYPE_MAP: {
 /**
  * Component displaying information related to the connection & audio/video quality.
  *
- * @param {Props} props - The props of the component.
+ * @param {IProps} props - The props of the component.
  * @returns {ReactElement}
  */
-function ConnectionStatus({ connectionDetails, t, connectionType }: Props) {
+function ConnectionStatus({ connectionDetails, t, connectionType }: IProps) {
     const { classes } = useStyles();
 
     const [ showDetails, toggleDetails ] = useState(false);
@@ -219,7 +219,7 @@ function ConnectionStatus({ connectionDetails, t, connectionType }: Props) {
  * @param {Object} state - The redux state.
  * @returns {Object}
  */
-function mapStateToProps(state: IState): Object {
+function mapStateToProps(state: IReduxState): Object {
     const { connectionDetails, connectionType } = getConnectionData(state);
 
     return {

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

@@ -3,7 +3,7 @@ import { Theme } from '@mui/material';
 import React, { ReactNode } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import { IState } from '../../../../app/types';
+import { IReduxState } from '../../../../app/types';
 import DeviceStatus from '../../../../prejoin/components/preview/DeviceStatus';
 // @ts-ignore
 import { Toolbox } from '../../../../toolbox/components/web';
@@ -17,7 +17,7 @@ import ConnectionStatus from './ConnectionStatus';
 // @ts-ignore
 import Preview from './Preview';
 
-interface Props {
+interface IProps {
 
     /**
      * The list of toolbar buttons to render.
@@ -111,7 +111,7 @@ const PreMeetingScreen = ({
     title,
     videoMuted,
     videoTrack
-}: Props) => {
+}: IProps) => {
     const { classes } = useStyles();
     const containerClassName = `premeeting-screen ${className ? className : ''}`;
     const style = _premeetingBackground ? {
@@ -157,7 +157,7 @@ const PreMeetingScreen = ({
  * @param {Object} ownProps - The props passed to the component.
  * @returns {Object}
  */
-function mapStateToProps(state: IState, ownProps: Partial<Props>) {
+function mapStateToProps(state: IReduxState, ownProps: Partial<IProps>) {
     const { hiddenPremeetingButtons, hideConferenceSubject } = state['features/base/config'];
     const toolbarButtons = getToolbarButtons(state);
     const premeetingButtons = (ownProps.thirdParty

react/features/base/premeeting/functions.ts

@@ -1,6 +1,6 @@
 import { findIndex } from 'lodash';
 
-import { IState } from '../../app/types';
+import { IReduxState } from '../../app/types';
 
 import { CONNECTION_TYPE } from './constants';
 
@@ -191,7 +191,7 @@ function _getConnectionDataFromTestResults({ fractionalLoss: l, throughput: t }:
  *   connectionDetails: string[]
  * }}
  */
-export function getConnectionData(state: IState) {
+export function getConnectionData(state: IReduxState) {
     const { precallTestResults } = state['features/prejoin'];
 
     if (precallTestResults) {

react/features/base/react/components/web/BaseIndicator.tsx

@@ -11,7 +11,7 @@ import { Tooltip } from '../../../tooltip';
 /**
  * The type of the React {@code Component} props of {@link BaseIndicator}.
  */
-interface Props extends WithTranslation {
+interface IProps extends WithTranslation {
 
     /**
      * Additional CSS class name.
@@ -89,7 +89,7 @@ const BaseIndicator = ({
     t,
     tooltipKey,
     tooltipPosition = 'top'
-}: Props) => {
+}: IProps) => {
     const { classes: styles } = useStyles();
     const style: any = {};
 

react/features/base/react/types.ts

@@ -1,4 +1,4 @@
-export interface IconButtonProps {
+export interface IIconButtonProps {
     accessibilityLabel?: string;
     color?: string;
     disabled?: boolean;

react/features/base/redux/MiddlewareRegistry.ts

@@ -1,6 +1,6 @@
 import { Middleware, applyMiddleware } from 'redux';
 
-import { IState, IStore } from '../../app/types';
+import { IReduxState, IStore } from '../../app/types';
 
 /**
  * A registry for Redux middleware, allowing features to register their
@@ -42,7 +42,7 @@ class MiddlewareRegistry {
      * @param {Middleware} middleware - A Redux middleware.
      * @returns {void}
      */
-    register(middleware: Middleware<any, IState, IStore['dispatch']>) {
+    register(middleware: Middleware<any, IReduxState, IStore['dispatch']>) {
         this._elements.push(middleware);
     }
 }

react/features/base/redux/StateListenerRegistry.ts

@@ -1,6 +1,6 @@
 import { Store } from 'redux';
 
-import { IState, IStore } from '../../app/types';
+import { IReduxState, IStore } from '../../app/types';
 
 import { equals } from './functions';
 import logger from './logger';
@@ -26,7 +26,7 @@ type Listener
  * The type selector supported for registration with
  * {@link StateListenerRegistry} in association with a {@link Listener}.
  *
- * @param {IState} state - The redux state from which the {@code Selector} is to
+ * @param {IReduxState} state - The redux state from which the {@code Selector} is to
  * derive data.
  * @param {any} prevSelection - The value previously derived from the redux
  * store/state by the {@code Selector}. Provided in case the {@code Selector}
@@ -36,7 +36,7 @@ type Listener
  * {@code prevSelection}. The associated {@code Listener} will only be invoked
  * if the returned value is other than {@code prevSelection}.
  */
-type Selector = (state: IState, prevSelection: any) => any;
+type Selector = (state: IReduxState, prevSelection: any) => any;
 
 /**
  * Options that can be passed to the register method.

react/features/base/redux/functions.ts

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import { connect as reduxConnect } from 'react-redux';
 
-import { IState } from '../../app/types';
+import { IReduxState } from '../../app/types';
 import { IStateful } from '../app/types';
 
 /**
@@ -136,7 +136,7 @@ function _set<T extends Object>(
  * returned.
  * @returns {Object} The redux state.
  */
-export function toState(stateful: IStateful): IState {
+export function toState(stateful: IStateful): IReduxState {
     if (stateful) {
         if (typeof stateful === 'function') {
             return stateful();

react/features/base/settings/functions.any.ts

@@ -1,4 +1,4 @@
-import { IState } from '../../app/types';
+import { IReduxState } from '../../app/types';
 import { IStateful } from '../app/types';
 import CONFIG_WHITELIST from '../config/configWhitelist';
 import { IConfigState } from '../config/reducer';
@@ -263,7 +263,7 @@ function _getUserSelectedDeviceId(options: {
  * @param {Object} state - The state of the application.
  * @returns {boolean}
  */
-export function shouldHideShareAudioHelper(state: IState): boolean | undefined {
+export function shouldHideShareAudioHelper(state: IReduxState): boolean | undefined {
 
     return state['features/base/settings'].hideShareAudioHelper;
 }
@@ -274,7 +274,7 @@ export function shouldHideShareAudioHelper(state: IState): boolean | undefined {
  * @param {Object} state - Redux state.
  * @returns {boolean}
  */
-export function shouldHideSelfView(state: IState) {
+export function shouldHideSelfView(state: IReduxState) {
     return getParticipantCount(state) === 1 ? false : getHideSelfView(state);
 }
 
@@ -284,6 +284,6 @@ export function shouldHideSelfView(state: IState) {
  * @param {Object} state - Redux state.
  * @returns {boolean}
  */
-export function getHideSelfView(state: IState) {
+export function getHideSelfView(state: IReduxState) {
     return state['features/base/config'].disableSelfView || state['features/base/settings'].disableSelfView;
 }

react/features/base/settings/functions.web.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { IState } from '../../app/types';
+import { IReduxState } from '../../app/types';
 
 export * from './functions.any';
 
@@ -9,7 +9,7 @@ export * from './functions.any';
  * @param {Object} state - The state of the application.
  * @returns {void}
  */
-export function getCurrentCameraDeviceId(state: IState) {
+export function getCurrentCameraDeviceId(state: IReduxState) {
     return getDeviceIdByType(state, 'isVideoTrack');
 }
 
@@ -19,7 +19,7 @@ export function getCurrentCameraDeviceId(state: IState) {
  * @param {Object} state - The state of the application.
  * @returns {void}
  */
-export function getCurrentMicDeviceId(state: IState) {
+export function getCurrentMicDeviceId(state: IReduxState) {
     return getDeviceIdByType(state, 'isAudioTrack');
 }
 
@@ -29,7 +29,7 @@ export function getCurrentMicDeviceId(state: IState) {
  * @param {Object} state - The state of the application.
  * @returns {void}
  */
-export function getCurrentOutputDeviceId(state: IState) {
+export function getCurrentOutputDeviceId(state: IReduxState) {
     return state['features/base/settings'].audioOutputDeviceId;
 }
 
@@ -40,7 +40,7 @@ export function getCurrentOutputDeviceId(state: IState) {
  * @param {string} isType - Can be 'isVideoTrack' | 'isAudioTrack'.
  * @returns {string}
  */
-function getDeviceIdByType(state: IState, isType: string) {
+function getDeviceIdByType(state: IReduxState, isType: string) {
     const [ deviceId ] = state['features/base/tracks']
         .map(t => t.jitsiTrack)
         .filter(t => t?.isLocal() && t[isType as keyof typeof t]())
@@ -55,7 +55,7 @@ function getDeviceIdByType(state: IState, isType: string) {
  * @param {Object} state - The state of the application.
  * @returns {string}
  */
-export function getDisplayName(state: IState): string {
+export function getDisplayName(state: IReduxState): string {
     return state['features/base/settings'].displayName || '';
 }
 

react/features/base/sounds/functions.any.ts

@@ -1,4 +1,4 @@
-import { IState } from '../../app/types';
+import { IReduxState } from '../../app/types';
 
 /**
  * Selector for retrieving the disabled sounds array.
@@ -6,6 +6,6 @@ import { IState } from '../../app/types';
  * @param {Object} state - The Redux state.
  * @returns {Array<string>} - The disabled sound id's array.
  */
-export function getDisabledSounds(state: IState) {
+export function getDisabledSounds(state: IReduxState) {
     return state['features/base/config'].disabledSounds || [];
 }

react/features/base/testing/functions.ts

@@ -1,4 +1,4 @@
-import { IState, IStore } from '../../app/types';
+import { IReduxState, IStore } from '../../app/types';
 import { getMultipleVideoSupportFeatureFlag } from '../config/functions.any';
 import { MEDIA_TYPE, VIDEO_TYPE } from '../media/constants';
 import { getParticipantById, isScreenShareParticipant } from '../participants/functions';
@@ -9,10 +9,10 @@ import { getTrackByMediaTypeAndParticipant, getVirtualScreenshareParticipantTrac
  * {@link TestHint} and other components from the testing package will be
  * rendered in various places across the app to help with automatic testing.
  *
- * @param {IState} state - The redux store state.
+ * @param {IReduxState} state - The redux store state.
  * @returns {boolean}
  */
-export function isTestModeEnabled(state: IState): boolean {
+export function isTestModeEnabled(state: IReduxState): boolean {
     const testingConfig = state['features/base/config'].testing;
 
     return Boolean(testingConfig?.testMode);

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

@@ -41,7 +41,7 @@ import {
     getTrackByJitsiTrack
 } from './functions';
 import logger from './logger';
-import { TrackOptions } from './types';
+import { ITrackOptions } from './types';
 
 /**
  * Add a given local track to the conference.
@@ -131,7 +131,7 @@ export function createDesiredLocalTracks(...desiredTypes: any) {
  * @param {Object} [options] - For info @see JitsiMeetJS.createLocalTracks.
  * @returns {Function}
  */
-export function createLocalTracksA(options: TrackOptions = {}) {
+export function createLocalTracksA(options: ITrackOptions = {}) {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const devices
             = options.devices || [ MEDIA_TYPE.AUDIO, MEDIA_TYPE.VIDEO ];

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

@@ -1,5 +1,5 @@
 /* eslint-disable lines-around-comment */
-import { IState, IStore } from '../../app/types';
+import { IReduxState, IStore } from '../../app/types';
 // @ts-ignore
 import { setPictureInPictureEnabled } from '../../mobile/picture-in-picture/functions';
 import { setAudioOnly } from '../audio-only/actions';
@@ -42,7 +42,7 @@ export function toggleScreensharing(enabled: boolean): Function {
  * @param {Object} state - The redux state.
  * @returns {void}
  */
-function _startScreenSharing(dispatch: Function, state: IState) {
+function _startScreenSharing(dispatch: Function, state: IReduxState) {
     setPictureInPictureEnabled(false);
 
     JitsiMeetJS.createLocalTracks({ devices: [ 'desktop' ] })

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

@@ -1,7 +1,7 @@
 /* eslint-disable lines-around-comment */
 // @ts-expect-error
 import { AUDIO_ONLY_SCREEN_SHARE_NO_TRACK } from '../../../../modules/UI/UIErrors';
-import { IState, IStore } from '../../app/types';
+import { IReduxState, IStore } from '../../app/types';
 import { showModeratedNotification } from '../../av-moderation/actions';
 import { shouldShowModeratedNotification } from '../../av-moderation/functions';
 import { setNoiseSuppressionEnabled } from '../../noise-suppression/actions';
@@ -34,7 +34,7 @@ import {
     getLocalDesktopTrack,
     getLocalJitsiAudioTrack
 } from './functions';
-import { ShareOptions, ToggleScreenSharingOptions } from './types';
+import { IShareOptions, IToggleScreenSharingOptions } from './types';
 
 export * from './actions.any';
 
@@ -53,7 +53,7 @@ export function toggleScreensharing(
         enabled?: boolean,
         audioOnly = false,
         ignoreDidHaveVideo = false,
-        shareOptions: ShareOptions = {}) {
+        shareOptions: IShareOptions = {}) {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         // check for A/V Moderation when trying to start screen sharing
         if ((enabled || enabled === undefined)
@@ -129,7 +129,7 @@ function _handleScreensharingError(
  * @param {*} state - The redux state.
  * @returns {void}
  */
-async function _maybeApplyAudioMixerEffect(desktopAudioTrack: any, state: IState): Promise<void> {
+async function _maybeApplyAudioMixerEffect(desktopAudioTrack: any, state: IReduxState): Promise<void> {
     const localAudio = getLocalJitsiAudioTrack(state);
     const conference = getCurrentConference(state);
 
@@ -159,7 +159,7 @@ async function _toggleScreenSharing(
             enabled,
             audioOnly = false,
             shareOptions = {}
-        }: ToggleScreenSharingOptions,
+        }: IToggleScreenSharingOptions,
         store: IStore
 ): Promise<void> {
     const { dispatch, getState } = store;

react/features/base/tracks/functions.ts

@@ -1,4 +1,4 @@
-import { IState, IStore } from '../../app/types';
+import { IReduxState, IStore } from '../../app/types';
 import { IStateful } from '../app/types';
 import {
     getMultipleVideoSendingSupportFeatureFlag,
@@ -13,7 +13,7 @@ import {
     getVirtualScreenshareParticipantOwnerId,
     isScreenShareParticipant
 } from '../participants/functions';
-import { Participant } from '../participants/types';
+import { IParticipant } from '../participants/types';
 import { toState } from '../redux/functions';
 import {
     getUserSelectedCameraDeviceId,
@@ -24,25 +24,25 @@ import {
 import loadEffects from './loadEffects';
 import logger from './logger';
 import { ITrack } from './reducer';
-import { TrackOptions } from './types';
+import { ITrackOptions } from './types';
 
 /**
  * Returns root tracks state.
  *
- * @param {IState} state - Global state.
+ * @param {IReduxState} state - Global state.
  * @returns {Object} Tracks state.
  */
-export const getTrackState = (state: IState) => state['features/base/tracks'];
+export const getTrackState = (state: IReduxState) => state['features/base/tracks'];
 
 /**
  * Checks if the passed media type is muted for the participant.
  *
- * @param {Participant} participant - Participant reference.
+ * @param {IParticipant} participant - Participant reference.
  * @param {MediaType} mediaType - Media type.
- * @param {IState} state - Global state.
+ * @param {IReduxState} state - Global state.
  * @returns {boolean} - Is the media type muted for the participant.
  */
-export function isParticipantMediaMuted(participant: Participant, mediaType: MediaType, state: IState) {
+export function isParticipantMediaMuted(participant: IParticipant, mediaType: MediaType, state: IReduxState) {
     if (!participant) {
         return false;
     }
@@ -61,22 +61,22 @@ export function isParticipantMediaMuted(participant: Participant, mediaType: Med
 /**
  * Checks if the participant is audio muted.
  *
- * @param {Participant} participant - Participant reference.
+ * @param {IParticipant} participant - Participant reference.
- * @param {IState} state - Global state.
+ * @param {IReduxState} state - Global state.
  * @returns {boolean} - Is audio muted for the participant.
  */
-export function isParticipantAudioMuted(participant: Participant, state: IState) {
+export function isParticipantAudioMuted(participant: IParticipant, state: IReduxState) {
     return isParticipantMediaMuted(participant, MEDIA_TYPE.AUDIO, state);
 }
 
 /**
  * Checks if the participant is video muted.
  *
- * @param {Participant} participant - Participant reference.
+ * @param {IParticipant} participant - Participant reference.
- * @param {IState} state - Global state.
+ * @param {IReduxState} state - Global state.
  * @returns {boolean} - Is video muted for the participant.
  */
-export function isParticipantVideoMuted(participant: Participant, state: IState) {
+export function isParticipantVideoMuted(participant: IParticipant, state: IReduxState) {
     return isParticipantMediaMuted(participant, MEDIA_TYPE.VIDEO, state);
 }
 
@@ -92,7 +92,7 @@ export function isParticipantVideoMuted(participant: Participant, state: IState)
  * shared.
  * @returns {Promise<JitsiLocalTrack>}
  */
-export async function createLocalPresenterTrack(options: TrackOptions, desktopHeight: number) {
+export async function createLocalPresenterTrack(options: ITrackOptions, desktopHeight: number) {
     const { cameraDeviceId } = options;
 
     // compute the constraints of the camera track based on the resolution
@@ -140,7 +140,7 @@ export async function createLocalPresenterTrack(options: TrackOptions, desktopHe
  * is to execute and from which state such as {@code config} is to be retrieved.
  * @returns {Promise<JitsiLocalTrack[]>}
  */
-export function createLocalTracksF(options: TrackOptions = {}, store?: IStore) {
+export function createLocalTracksF(options: ITrackOptions = {}, store?: IStore) {
     let { cameraDeviceId, micDeviceId } = options;
     const {
         desktopSharingSourceDevice,
@@ -325,10 +325,10 @@ export function getLocalDesktopTrack(tracks: ITrack[], includePending = false) {
 /**
  * Returns the stored local desktop jitsiLocalTrack.
  *
- * @param {IState} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {JitsiLocalTrack|undefined}
  */
-export function getLocalJitsiDesktopTrack(state: IState) {
+export function getLocalJitsiDesktopTrack(state: IReduxState) {
     const track = getLocalDesktopTrack(getTrackState(state));
 
     return track?.jitsiTrack;
@@ -400,10 +400,10 @@ export function getLocalVideoType(tracks: ITrack[]) {
 /**
  * Returns the stored local video track.
  *
- * @param {IState} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {Object}
  */
-export function getLocalJitsiVideoTrack(state: IState) {
+export function getLocalJitsiVideoTrack(state: IReduxState) {
     const track = getLocalVideoTrack(getTrackState(state));
 
     return track?.jitsiTrack;
@@ -412,10 +412,10 @@ export function getLocalJitsiVideoTrack(state: IState) {
 /**
  * Returns the stored local audio track.
  *
- * @param {IState} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {Object}
  */
-export function getLocalJitsiAudioTrack(state: IState) {
+export function getLocalJitsiAudioTrack(state: IReduxState) {
     const track = getLocalAudioTrack(getTrackState(state));
 
     return track?.jitsiTrack;
@@ -424,13 +424,13 @@ export function getLocalJitsiAudioTrack(state: IState) {
 /**
  * Returns track of specified media type for specified participant.
  *
- * @param {IState} state - The redux state.
+ * @param {IReduxState} state - The redux state.
- * @param {Participant} participant - Participant Object.
+ * @param {IParticipant} participant - Participant Object.
  * @returns {(Track|undefined)}
  */
 export function getVideoTrackByParticipant(
-        state: IState,
+        state: IReduxState,
-        participant?: Participant) {
+        participant?: IParticipant) {
 
     if (!participant) {
         return;
@@ -448,11 +448,11 @@ export function getVideoTrackByParticipant(
 /**
  * Returns source name for specified participant id.
  *
- * @param {IState} state - The Redux state.
+ * @param {IReduxState} state - The Redux state.
  * @param {string} participantId - Participant ID.
  * @returns {string | undefined}
  */
-export function getSourceNameByParticipantId(state: IState, participantId: string) {
+export function getSourceNameByParticipantId(state: IReduxState, participantId: string) {
     const participant = getParticipantByIdOrUndefined(state, participantId);
     const track = getVideoTrackByParticipant(state, participant);
 
@@ -492,11 +492,11 @@ export function getVirtualScreenshareParticipantTrack(tracks: ITrack[], virtualS
 /**
  * Returns track source names of given screen share participant ids.
  *
- * @param {IState} state - The entire redux state.
+ * @param {IReduxState} state - The entire redux state.
  * @param {string[]} screenShareParticipantIds - Participant ID.
  * @returns {(string[])}
  */
-export function getRemoteScreenSharesSourceNames(state: IState, screenShareParticipantIds = []) {
+export function getRemoteScreenSharesSourceNames(state: IReduxState, screenShareParticipantIds = []) {
     const tracks = state['features/base/tracks'];
 
     return getMultipleVideoSupportFeatureFlag(state)
@@ -611,10 +611,10 @@ export function isLocalTrackMuted(tracks: ITrack[], mediaType: MediaType) {
 /**
  * Checks if the local video track is of type DESKtOP.
  *
- * @param {IState} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {boolean}
  */
-export function isLocalVideoTrackDesktop(state: IState) {
+export function isLocalVideoTrackDesktop(state: IReduxState) {
     const videoTrack = getLocalVideoTrack(getTrackState(state));
 
     return videoTrack && videoTrack.videoType === VIDEO_TYPE.DESKTOP;
@@ -641,10 +641,10 @@ export function isRemoteTrackMuted(tracks: ITrack[], mediaType: MediaType, parti
  * Returns whether or not the current environment needs a user interaction with
  * the page before any unmute can occur.
  *
- * @param {IState} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {boolean}
  */
-export function isUserInteractionRequiredForUnmute(state: IState) {
+export function isUserInteractionRequiredForUnmute(state: IReduxState) {
     return browser.isUserInteractionRequiredForUnmute()
         && window
         && window.self !== window.top
@@ -660,7 +660,7 @@ export function isUserInteractionRequiredForUnmute(state: IState) {
  * @param {Object} state - The redux state.
  * @returns {Promise}
  */
-export function setTrackMuted(track: any, muted: boolean, state: IState) {
+export function setTrackMuted(track: any, muted: boolean, state: IReduxState) {
     muted = Boolean(muted); // eslint-disable-line no-param-reassign
 
     // Ignore the check for desktop track muted operation. When the screenshare is terminated by clicking on the

react/features/base/tracks/types.ts

@@ -1,4 +1,4 @@
-export interface TrackOptions {
+export interface ITrackOptions {
     cameraDeviceId?: string | null;
     constraints?: {
         video?: {
@@ -18,13 +18,13 @@ export interface TrackOptions {
     timeout?: number;
 }
 
-export interface ToggleScreenSharingOptions {
+export interface IToggleScreenSharingOptions {
     audioOnly: boolean;
     enabled?: boolean;
-    shareOptions: ShareOptions;
+    shareOptions: IShareOptions;
 }
 
-export interface ShareOptions {
+export interface IShareOptions {
     desktopSharingSourceDevice?: string;
     desktopSharingSources?: string[];
     desktopStream?: any;

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

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

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

@@ -8,18 +8,18 @@ import {
 
 import { BUTTON_MODES, BUTTON_TYPES } from '../../constants';
 import BaseTheme from '../BaseTheme.native';
-import { ButtonProps } from '../types';
+import { IButtonProps } from '../types';
 
 import styles from './buttonStyles';
 
-export interface IButtonProps extends ButtonProps {
+export interface IProps extends IButtonProps {
     color?: string;
     contentStyle?: Object | undefined;
     labelStyle?: Object | undefined;
     style?: Object | undefined;
 }
 
-const Button: React.FC<IButtonProps> = ({
+const Button: React.FC<IProps> = ({
     accessibilityLabel,
     color: buttonColor,
     contentStyle,
@@ -30,7 +30,7 @@ const Button: React.FC<IButtonProps> = ({
     onClick: onPress,
     style,
     type
-}: IButtonProps) => {
+}: IProps) => {
     const { t } = useTranslation();
     const { CONTAINED } = BUTTON_MODES;
     const { DESTRUCTIVE, PRIMARY, SECONDARY, TERTIARY } = BUTTON_TYPES;

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

@@ -13,19 +13,19 @@ import {
 import Icon from '../../../icons/components/Icon';
 import { IconCloseCircle } from '../../../icons/svg';
 import BaseTheme from '../../../ui/components/BaseTheme.native';
-import { InputProps } from '../types';
+import { IInputProps } from '../types';
 
 import styles from './inputStyles';
 
-interface IInputProps extends InputProps {
+interface IProps extends IInputProps {
 
     /**
      * Custom styles to be applied to the component.
      */
-    customStyles?: CustomStyles;
+    customStyles?: ICustomStyles;
 }
 
-interface CustomStyles {
+interface ICustomStyles {
     container?: Object;
     input?: Object;
 }
@@ -40,7 +40,7 @@ const Input = ({
     onChange,
     placeholder,
     value
-}: IInputProps) => {
+}: IProps) => {
     const [ focused, setFocused ] = useState(false);
     const handleChange = useCallback((e: NativeSyntheticEvent<TextInputChangeEventData>) => {
         const { nativeEvent: { text } } = e;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { ColorValue } from 'react-native';
 import { Switch as NativeSwitch } from 'react-native-paper';
 
-import { SwitchProps } from '../types';
+import { ISwitchProps } from '../types';
 
 import {
     DISABLED_TRACK_COLOR,
@@ -10,7 +10,7 @@ import {
     THUMB_COLOR
 } from './switchStyles';
 
-interface Props extends SwitchProps {
+interface IProps extends ISwitchProps {
 
     /**
      * Custom styles for the switch.
@@ -38,7 +38,7 @@ const Switch = ({
         false: DISABLED_TRACK_COLOR
     },
     style
-}: Props) => (
+}: IProps) => (
     <NativeSwitch
         disabled = { disabled }
         onValueChange = { onChange }

react/features/base/ui/components/types.ts

@@ -2,7 +2,7 @@ import { GestureResponderEvent } from 'react-native';
 
 import { BUTTON_TYPES } from '../constants';
 
-export interface ButtonProps {
+export interface IButtonProps {
 
     /**
      * Label used for accessibility.
@@ -40,7 +40,7 @@ export interface ButtonProps {
     type?: BUTTON_TYPES;
 }
 
-export interface InputProps {
+export interface IInputProps {
 
     /**
      * Whether the input is be clearable. (show clear button).
@@ -83,7 +83,7 @@ export interface InputProps {
     value: string | number;
 }
 
-export interface SwitchProps {
+export interface ISwitchProps {
 
     /**
      * Whether or not the toggle is on.

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

@@ -6,9 +6,9 @@ import { makeStyles } from 'tss-react/mui';
 import Icon from '../../../icons/components/Icon';
 import { withPixelLineHeight } from '../../../styles/functions.web';
 import { BUTTON_TYPES } from '../../constants';
-import { ButtonProps } from '../types';
+import { IButtonProps } from '../types';
 
-interface IButtonProps extends ButtonProps {
+interface IProps extends IButtonProps {
 
     /**
      * Class name used for additional styles.
@@ -191,7 +191,7 @@ const Button = React.forwardRef<any, any>(({
     size = 'medium',
     testId,
     type = BUTTON_TYPES.PRIMARY
-}: IButtonProps, ref) => {
+}: IProps, ref) => {
     const { classes: styles, cx } = useStyles();
     const { t } = useTranslation();
 

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

@@ -7,7 +7,7 @@ import Icon from '../../../icons/components/Icon';
 import { IconCheckMark } from '../../../icons/svg';
 import { withPixelLineHeight } from '../../../styles/functions.web';
 
-interface CheckboxProps {
+interface ICheckboxProps {
 
     /**
      * Whether the input is checked or not.
@@ -149,7 +149,7 @@ const Checkbox = ({
     label,
     name,
     onChange
-}: CheckboxProps) => {
+}: ICheckboxProps) => {
     const { classes: styles, cx, theme } = useStyles();
     const isMobile = isMobileBrowser();
 

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

@@ -172,7 +172,7 @@ const useStyles = makeStyles()((theme: Theme) => {
     };
 });
 
-interface DialogProps {
+interface IDialogProps {
     back?: {
         hidden?: boolean;
         onClick?: () => void;
@@ -215,7 +215,7 @@ const Dialog = ({
     size = 'medium',
     title,
     titleKey
-}: DialogProps) => {
+}: IDialogProps) => {
     const { classes, cx } = useStyles();
     const { t } = useTranslation();
     const { isUnmounting } = useContext(DialogTransitionContext);

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

@@ -1,13 +1,13 @@
 import { ModalTransition } from '@atlaskit/modal-dialog';
 import React, { Component, ComponentType } from 'react';
 
-import { IState } from '../../../../app/types';
+import { IReduxState } from '../../../../app/types';
-import { ReactionEmojiProps } from '../../../../reactions/constants';
+import { IReactionEmojiProps } from '../../../../reactions/constants';
 import { connect } from '../../../redux/functions';
 
 import DialogTransition from './DialogTransition';
 
-interface Props {
+interface IProps {
 
     /**
      * The component to render.
@@ -27,7 +27,7 @@ interface Props {
     /**
      * Array of reactions to be displayed.
      */
-    _reactionsQueue: Array<ReactionEmojiProps>;
+    _reactionsQueue: Array<IReactionEmojiProps>;
 
     /**
      * True if the UI is in a compact state where we don't show dialogs.
@@ -40,7 +40,7 @@ interface Props {
  * for supporting @atlaskit's modal animations.
  *
  */
-class DialogContainer extends Component<Props> {
+class DialogContainer extends Component<IProps> {
 
     /**
      * Returns the dialog to be displayed.
@@ -85,9 +85,9 @@ class DialogContainer extends Component<Props> {
  *
  * @param {Object} state - The redux state.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
-function mapStateToProps(state: IState) {
+function mapStateToProps(state: IReduxState) {
     const stateFeaturesBaseDialog = state['features/base/dialog'];
     const { reducedUI } = state['features/base/responsive-ui'];
 

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

@@ -7,9 +7,9 @@ import { isMobileBrowser } from '../../../environment/utils';
 import Icon from '../../../icons/components/Icon';
 import { IconCloseCircle } from '../../../icons/svg';
 import { withPixelLineHeight } from '../../../styles/functions.web';
-import { InputProps } from '../types';
+import { IInputProps } from '../types';
 
-interface IInputProps extends InputProps {
+interface IProps extends IInputProps {
     accessibilityLabel?: string;
     autoFocus?: boolean;
     bottomLabel?: string;
@@ -127,7 +127,7 @@ const useStyles = makeStyles()((theme: Theme) => {
     };
 });
 
-const Input = React.forwardRef<any, IInputProps>(({
+const Input = React.forwardRef<any, IProps>(({
     accessibilityLabel,
     autoFocus,
     bottomLabel,
@@ -149,7 +149,7 @@ const Input = React.forwardRef<any, IInputProps>(({
     textarea = false,
     type = 'text',
     value
-}: IInputProps, ref) => {
+}: IProps, ref) => {
     const { classes: styles, cx } = useStyles();
     const isMobile = isMobileBrowser();
 

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

@@ -7,7 +7,7 @@ import Icon from '../../../icons/components/Icon';
 import { IconArrowDown } from '../../../icons/svg';
 import { withPixelLineHeight } from '../../../styles/functions.web';
 
-interface SelectProps {
+interface ISelectProps {
 
     /**
      * Helper text to be displayed below the select.
@@ -144,7 +144,7 @@ const Select = ({
     label,
     onChange,
     options,
-    value }: SelectProps) => {
+    value }: ISelectProps) => {
     const { classes, cx, theme } = useStyles();
     const isMobile = isMobileBrowser();
 

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

@@ -3,9 +3,9 @@ import React, { useCallback } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { isMobileBrowser } from '../../../environment/utils';
-import { SwitchProps } from '../types';
+import { ISwitchProps } from '../types';
 
-interface Props extends SwitchProps {
+interface IProps extends ISwitchProps {
 
     /**
      * Id of the toggle.
@@ -78,7 +78,7 @@ const useStyles = makeStyles()((theme: Theme) => {
     };
 });
 
-const Switch = ({ id, checked, disabled, onChange }: Props) => {
+const Switch = ({ id, checked, disabled, onChange }: IProps) => {
     const { classes: styles, cx } = useStyles();
     const isMobile = isMobileBrowser();
 

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

@@ -5,7 +5,7 @@ import { makeStyles } from 'tss-react/mui';
 import { isMobileBrowser } from '../../../environment/utils';
 import { withPixelLineHeight } from '../../../styles/functions.web';
 
-interface TabProps {
+interface ITabProps {
     accessibilityLabel: string;
     onChange: (id: string) => void;
     selected: string;
@@ -83,7 +83,7 @@ const Tabs = ({
     onChange,
     selected,
     accessibilityLabel
-}: TabProps) => {
+}: ITabProps) => {
     const { classes, cx } = useStyles();
     const isMobile = isMobileBrowser();
 

react/features/base/ui/functions.web.ts

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import { adaptV4Theme, createTheme } from '@mui/material/styles';
 
-import { Palette as Palette1, Typography } from '../ui/types';
+import { ITypography, IPalette as Palette1 } from '../ui/types';
 
 import { createColorTokens } from './utils';
 
@@ -9,7 +10,7 @@ declare module '@mui/material/styles' {
     interface Palette extends Palette1 {}
 
     // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    interface TypographyVariants extends Typography {}
+    interface TypographyVariants extends ITypography {}
 }
 
 interface ThemeProps {

react/features/base/ui/types.ts

@@ -1,11 +1,11 @@
-interface TypographyType {
+interface ITypographyType {
     fontSize: number;
     fontWeight: string;
     letterSpacing: number;
     lineHeight: number;
 }
 
-export interface Palette {
+export interface IPalette {
     action01: string;
     action01Active: string;
     action01Hover: string;
@@ -60,21 +60,21 @@ export interface Palette {
     warning02: string;
 }
 
-export interface Typography {
+export interface ITypography {
-    bodyLongBold: TypographyType;
+    bodyLongBold: ITypographyType;
-    bodyLongBoldLarge: TypographyType;
+    bodyLongBoldLarge: ITypographyType;
-    bodyLongRegular: TypographyType;
+    bodyLongRegular: ITypographyType;
-    bodyLongRegularLarge: TypographyType;
+    bodyLongRegularLarge: ITypographyType;
-    bodyShortBold: TypographyType;
+    bodyShortBold: ITypographyType;
-    bodyShortBoldLarge: TypographyType;
+    bodyShortBoldLarge: ITypographyType;
-    bodyShortRegular: TypographyType;
+    bodyShortRegular: ITypographyType;
-    bodyShortRegularLarge: TypographyType;
+    bodyShortRegularLarge: ITypographyType;
-    heading1: TypographyType;
+    heading1: ITypographyType;
-    heading2: TypographyType;
+    heading2: ITypographyType;
-    heading3: TypographyType;
+    heading3: ITypographyType;
-    heading4: TypographyType;
+    heading4: ITypographyType;
-    heading5: TypographyType;
+    heading5: ITypographyType;
-    heading6: TypographyType;
+    heading6: ITypographyType;
-    labelBold: TypographyType;
+    labelBold: ITypographyType;
-    labelRegular: TypographyType;
+    labelRegular: ITypographyType;
 }

react/features/chat/actions.any.ts

@@ -1,7 +1,7 @@
 import { IStore } from '../app/types';
 import { getCurrentConference } from '../base/conference/functions';
 import { getLocalParticipant } from '../base/participants/functions';
-import { Participant } from '../base/participants/types';
+import { IParticipant } from '../base/participants/types';
 import { LOBBY_CHAT_INITIALIZED } from '../lobby/constants';
 
 import {
@@ -114,9 +114,9 @@ export function sendMessage(message: string, ignorePrivacy = false) {
 /**
  * Initiates the sending of a private message to the supplied participant.
  *
- * @param {Participant} participant - The participant to set the recipient to.
+ * @param {IParticipant} participant - The participant to set the recipient to.
  * @returns {{
- *     participant: Participant,
+ *     participant: IParticipant,
  *     type: SET_PRIVATE_MESSAGE_RECIPIENT
  * }}
  */
@@ -148,7 +148,7 @@ export function setIsPollsTabFocused(isPollsTabFocused: boolean) {
  *
  * @returns {Function}
  */
-export function onLobbyChatInitialized(lobbyChatInitializedInfo: { attendee: Participant; moderator: Participant; }) {
+export function onLobbyChatInitialized(lobbyChatInitializedInfo: { attendee: IParticipant; moderator: IParticipant; }) {
     return async (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const conference = getCurrentConference(state);

react/features/chat/components/AbstractChatPrivacyDialog.tsx

@@ -1,12 +1,12 @@
 import { PureComponent } from 'react';
 import { WithTranslation } from 'react-i18next';
 
-import { IState, IStore } from '../../app/types';
+import { IReduxState, IStore } from '../../app/types';
 import { getParticipantById } from '../../base/participants/functions';
-import { Participant } from '../../base/participants/types';
+import { IParticipant } from '../../base/participants/types';
 import { sendMessage, setPrivateMessageRecipient } from '../actions';
 
-interface Props extends WithTranslation {
+interface IProps extends WithTranslation {
 
     /**
      * Prop to be invoked on sending the message.
@@ -37,13 +37,13 @@ interface Props extends WithTranslation {
 /**
  * Abstract class for the dialog displayed to avoid mis-sending private messages.
  */
-export class AbstractChatPrivacyDialog extends PureComponent<Props> {
+export class AbstractChatPrivacyDialog extends PureComponent<IProps> {
     /**
      * Instantiates a new instance.
      *
      * @inheritdoc
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this._onSendGroupMessage = this._onSendGroupMessage.bind(this);
@@ -80,7 +80,7 @@ export class AbstractChatPrivacyDialog extends PureComponent<Props> {
  * Maps part of the props of this component to Redux actions.
  *
  * @param {Function} dispatch - The Redux dispatch function.
- * @returns {Props}
+ * @returns {IProps}
  */
 export function _mapDispatchToProps(dispatch: IStore['dispatch']) {
     return {
@@ -88,7 +88,7 @@ export function _mapDispatchToProps(dispatch: IStore['dispatch']) {
             dispatch(sendMessage(message, true));
         },
 
-        _onSetMessageRecipient: (participant: Participant) => {
+        _onSetMessageRecipient: (participant: IParticipant) => {
             dispatch(setPrivateMessageRecipient(participant));
         }
     };
@@ -97,11 +97,11 @@ export function _mapDispatchToProps(dispatch: IStore['dispatch']) {
 /**
  * Maps part of the Redux store to the props of this component.
  *
- * @param {IState} state - The Redux state.
+ * @param {IReduxState} state - The Redux state.
- * @param {Props} ownProps - The own props of the component.
+ * @param {IProps} ownProps - The own props of the component.
- * @returns {Props}
+ * @returns {IProps}
  */
-export function _mapStateToProps(state: IState, ownProps: Props) {
+export function _mapStateToProps(state: IReduxState, ownProps: IProps) {
     return {
         _participant: getParticipantById(state, ownProps.participantID)
     };

react/features/chat/components/AbstractMessageContainer.ts

@@ -2,7 +2,7 @@ import { Component } from 'react';
 
 import { IMessage } from '../reducer';
 
-export interface Props {
+export interface IProps {
 
     /**
      * The messages array to render.
@@ -15,7 +15,7 @@ export interface Props {
  *
  * @augments PureComponent
  */
-export default class AbstractMessageContainer<P extends Props, S> extends Component<P, S> {
+export default class AbstractMessageContainer<P extends IProps, S> extends Component<P, S> {
     static defaultProps = {
         messages: [] as IMessage[]
     };

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

@@ -1,7 +1,7 @@
 import React, { Component, RefObject } from 'react';
 import { WithTranslation } from 'react-i18next';
 
-import { IState, IStore } from '../../../app/types';
+import { IReduxState, IStore } from '../../../app/types';
 import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n/functions';
 import { IconPlane, IconSmile } from '../../../base/icons/svg';
@@ -16,7 +16,7 @@ import SmileysPanel from './SmileysPanel';
 /**
  * The type of the React {@code Component} props of {@link ChatInput}.
  */
-interface Props extends WithTranslation {
+interface IProps extends WithTranslation {
 
     /**
      * Whether chat emoticons are disabled.
@@ -55,7 +55,7 @@ type State = {
  *
  * @augments Component
  */
-class ChatInput extends Component<Props, State> {
+class ChatInput extends Component<IProps, State> {
     _textArea?: RefObject<HTMLTextAreaElement>;
 
     state = {
@@ -69,7 +69,7 @@ class ChatInput extends Component<Props, State> {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this._textArea = React.createRef<HTMLTextAreaElement>();
@@ -254,7 +254,7 @@ class ChatInput extends Component<Props, State> {
  *     _areSmileysDisabled: boolean
  * }}
  */
-const mapStateToProps = (state: IState) => {
+const mapStateToProps = (state: IReduxState) => {
     return {
         _areSmileysDisabled: areSmileysDisabled(state)
     };

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

@@ -14,7 +14,7 @@ import KeyboardAvoider from './KeyboardAvoider';
 /**
  * The type of the React {@code Component} props of {@DisplayNameForm}.
  */
-interface Props extends WithTranslation {
+interface IProps extends WithTranslation {
 
     /**
      * Invoked to set the local participant display name.
@@ -43,7 +43,7 @@ type State = {
  *
  * @augments Component
  */
-class DisplayNameForm extends Component<Props, State> {
+class DisplayNameForm extends Component<IProps, State> {
     state = {
         displayName: ''
     };
@@ -54,7 +54,7 @@ class DisplayNameForm extends Component<Props, State> {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         // Bind event handlers so they are only bound once for every instance.

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

@@ -3,13 +3,13 @@ import React, { RefObject } from 'react';
 import { scrollIntoView } from 'seamless-scroll-polyfill';
 
 import { MESSAGE_TYPE_REMOTE } from '../../constants';
-import AbstractMessageContainer, { Props } from '../AbstractMessageContainer';
+import AbstractMessageContainer, { IProps } from '../AbstractMessageContainer';
 
 // @ts-ignore
 import ChatMessageGroup from './ChatMessageGroup';
 import NewMessagesButton from './NewMessagesButton';
 
-interface State {
+interface IState {
 
     /**
      * Whether or not message container has received new messages.
@@ -32,12 +32,12 @@ interface State {
  *
  * @augments AbstractMessageContainer
  */
-export default class MessageContainer extends AbstractMessageContainer<Props, State> {
+export default class MessageContainer extends AbstractMessageContainer<IProps, IState> {
     /**
      * Component state used to decide when the hasNewMessages button to appear
      * and where to scroll when click on hasNewMessages button.
      */
-    state: State = {
+    state: IState = {
         hasNewMessages: false,
         isScrolledToBottom: true,
         lastReadMessageId: ''
@@ -63,10 +63,10 @@ export default class MessageContainer extends AbstractMessageContainer<Props, St
     /**
      * Initializes a new {@code MessageContainer} instance.
      *
-     * @param {Props} props - The React {@code Component} props to initialize
+     * @param {IProps} props - The React {@code Component} props to initialize
      * the new {@code MessageContainer} instance with.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this._messageListRef = React.createRef<HTMLDivElement>();
@@ -141,7 +141,7 @@ export default class MessageContainer extends AbstractMessageContainer<Props, St
      * @inheritdoc
      * @returns {void}
      */
-    componentDidUpdate(prevProps: Props) {
+    componentDidUpdate(prevProps: IProps) {
         const hasNewMessages = this.props.messages.length !== prevProps.messages.length;
 
         if (hasNewMessages) {

react/features/chat/functions.ts

@@ -4,7 +4,7 @@ import aliases from 'react-emoji-render/data/aliases';
 // @ts-ignore
 import emojiAsciiAliases from 'react-emoji-render/data/asciiAliases';
 
-import { IState } from '../app/types';
+import { IReduxState } from '../app/types';
 import { escapeRegexp } from '../base/util/helpers';
 
 import { IMessage } from './reducer';
@@ -83,10 +83,10 @@ export function replaceNonUnicodeEmojis(message: string) {
 /**
  * Selector for calculating the number of unread chat messages.
  *
- * @param {IState} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {number} The number of unread messages.
  */
-export function getUnreadCount(state: IState) {
+export function getUnreadCount(state: IReduxState) {
     const { lastReadMessage, messages } = state['features/chat'];
     const messagesCount = messages.length;
 
@@ -124,10 +124,10 @@ export function getUnreadCount(state: IState) {
 /**
  * Get whether the chat smileys are disabled or not.
  *
- * @param {IState} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {boolean} The disabled flag.
  */
-export function areSmileysDisabled(state: IState) {
+export function areSmileysDisabled(state: IReduxState) {
     const disableChatSmileys = state['features/base/config']?.disableChatSmileys === true;
 
     return disableChatSmileys;

react/features/chat/middleware.ts

@@ -1,7 +1,7 @@
 /* eslint-disable lines-around-comment */
 import { AnyAction } from 'redux';
 
-import { IState, IStore } from '../app/types';
+import { IReduxState, IStore } from '../app/types';
 import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../base/app/actionTypes';
 import { CONFERENCE_JOINED } from '../base/conference/actionTypes';
 import { getCurrentConference } from '../base/conference/functions';
@@ -366,7 +366,7 @@ export function handleLobbyMessageReceived(message: string, participantId: strin
  * @param {string} id - The knocking participant id.
  * @returns {string}
  */
-function getLobbyChatDisplayName(state: IState, id: string) {
+function getLobbyChatDisplayName(state: IReduxState, id: string) {
     const { knockingParticipants } = state['features/lobby'];
     const { lobbyMessageRecipient } = state['features/chat'];
 
@@ -508,7 +508,7 @@ function _persistSentPrivateMessage({ dispatch, getState }: IStore, recipientID:
  * @param {Object} action - The action being dispatched now.
  * @returns {string?}
  */
-function _shouldSendPrivateMessageTo(state: IState, action: AnyAction) {
+function _shouldSendPrivateMessageTo(state: IReduxState, action: AnyAction) {
     if (action.ignorePrivacy) {
         // Shortcut: this is only true, if we already displayed the notice, so no need to show it again.
         return undefined;

react/features/chat/reducer.ts

@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
 
-import { LocalParticipant, Participant } from '../base/participants/types';
+import { ILocalParticipant, IParticipant } from '../base/participants/types';
 import ReducerRegistry from '../base/redux/ReducerRegistry';
 
 import {
@@ -49,10 +49,10 @@ export interface IChatState {
     lobbyMessageRecipient?: {
         id: string;
         name: string;
-    } | LocalParticipant;
+    } | ILocalParticipant;
     messages: IMessage[];
     nbUnreadMessages: number;
-    privateMessageRecipient?: Participant;
+    privateMessageRecipient?: IParticipant;
 }
 
 ReducerRegistry.register<IChatState>('features/chat', (state = DEFAULT_STATE, action): IChatState => {

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

@@ -9,7 +9,7 @@ import {
     createShortcutEvent
 } from '../../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../../analytics/functions';
-import { IState } from '../../../../app/types';
+import { IReduxState } from '../../../../app/types';
 import { AUDIO_MUTE_BUTTON_ENABLED } from '../../../../base/flags/constants';
 import { getFeatureFlag } from '../../../../base/flags/functions';
 import Icon from '../../../../base/icons/components/Icon';
@@ -32,10 +32,10 @@ const LONG_PRESS = 'long.press';
  */
 const MicrophoneButton = (): JSX.Element | null => {
     const dispatch = useDispatch();
-    const audioMuted = useSelector((state: IState) => isLocalTrackMuted(state['features/base/tracks'],
+    const audioMuted = useSelector((state: IReduxState) => isLocalTrackMuted(state['features/base/tracks'],
         MEDIA_TYPE.AUDIO));
     const disabled = useSelector(isAudioMuteButtonDisabled);
-    const enabledFlag = useSelector((state: IState) => getFeatureFlag(state, AUDIO_MUTE_BUTTON_ENABLED, true));
+    const enabledFlag = useSelector((state: IReduxState) => getFeatureFlag(state, AUDIO_MUTE_BUTTON_ENABLED, true));
     const [ longPress, setLongPress ] = useState(false);
 
     if (!enabledFlag) {

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

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

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

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-import { IState } from '../../../app/types';
+import { IReduxState } from '../../../app/types';
 import { IconRaisedHand } from '../../../base/icons/svg';
 import Label from '../../../base/label/components/web/Label';
 // eslint-disable-next-line lines-around-comment
@@ -25,7 +25,7 @@ const useStyles = makeStyles()((theme: Theme) => {
 const RaisedHandsCountLabel = () => {
     const { classes: styles, theme } = useStyles();
     const dispatch = useDispatch();
-    const raisedHandsCount = useSelector((state: IState) =>
+    const raisedHandsCount = useSelector((state: IReduxState) =>
         (state['features/base/participants'].raisedHandsQueue || []).length);
     const { t } = useTranslation();
     const onClick = useCallback(() => {

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

@@ -3,7 +3,7 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { IState } from '../../../app/types';
+import { IReduxState } from '../../../app/types';
 import { IconMenuDown } from '../../../base/icons/svg/index';
 import Label from '../../../base/label/components/web/Label';
 // @ts-ignore
@@ -14,7 +14,7 @@ import { setTopPanelVisible } from '../../../filmstrip/actions.web';
 const ToggleTopPanelLabel = () => {
     const dispatch = useDispatch();
     const { t } = useTranslation();
-    const topPanelHidden = !useSelector((state: IState) => state['features/filmstrip'].topPanelVisible);
+    const topPanelHidden = !useSelector((state: IReduxState) => state['features/filmstrip'].topPanelVisible);
     const onClick = useCallback(() => {
         dispatch(setTopPanelVisible(true));
     }, []);

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

@@ -7,7 +7,7 @@ import React from 'react';
 import { WithTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 
-import { IState, IStore } from '../../../app/types';
+import { IReduxState, IStore } from '../../../app/types';
 import { getSourceNameSignalingFeatureFlag } from '../../../base/config/functions.any';
 import { translate } from '../../../base/i18n/functions';
 import { MEDIA_TYPE } from '../../../base/media/constants';
@@ -394,7 +394,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
  * @param {Props} ownProps - The own props of the component.
  * @returns {Props}
  */
-export function _mapStateToProps(state: IState, ownProps: Props) {
+export function _mapStateToProps(state: IReduxState, ownProps: Props) {
     const { participantId } = ownProps;
     const tracks = state['features/base/tracks'];
     const sourceNameSignalingEnabled = getSourceNameSignalingFeatureFlag(state);

react/features/connection-indicator/functions.ts

@@ -1,5 +1,5 @@
 import { JitsiParticipantConnectionStatus, JitsiTrackStreamingStatus } from '../base/lib-jitsi-meet';
-import { Participant } from '../base/participants/types';
+import { IParticipant } from '../base/participants/types';
 import { ITrack } from '../base/tracks/reducer';
 
 /**
@@ -44,7 +44,7 @@ export function isTrackStreamingStatusInterrupted(videoTrack?: ITrack) {
  * @param {Object} participant - Participant reference.
  * @returns {boolean} - Is connection status active.
  */
-export function isParticipantConnectionStatusActive(participant: Participant) {
+export function isParticipantConnectionStatusActive(participant: IParticipant) {
     const connectionStatus = participant?.connectionStatus;
 
     return connectionStatus === JitsiParticipantConnectionStatus.ACTIVE;
@@ -56,7 +56,7 @@ export function isParticipantConnectionStatusActive(participant: Participant) {
  * @param {Object} participant - Participant reference.
  * @returns {boolean} - Is connection status inactive.
  */
-export function isParticipantConnectionStatusInactive(participant?: Participant) {
+export function isParticipantConnectionStatusInactive(participant?: IParticipant) {
     const connectionStatus = participant?.connectionStatus;
 
     return connectionStatus === JitsiParticipantConnectionStatus.INACTIVE;
@@ -68,7 +68,7 @@ export function isParticipantConnectionStatusInactive(participant?: Participant)
  * @param {Object} participant - Participant reference.
  * @returns {boolean} - Is connection status interrupted.
  */
-export function isParticipantConnectionStatusInterrupted(participant?: Participant) {
+export function isParticipantConnectionStatusInterrupted(participant?: IParticipant) {
     const connectionStatus = participant?.connectionStatus;
 
     return connectionStatus === JitsiParticipantConnectionStatus.INTERRUPTED;

react/features/connection-indicator/statsEmitter.ts

@@ -14,7 +14,7 @@ import {
  */
 const subscribers: any = {};
 
-interface Stats {
+interface IStats {
     codec?: Object;
     framerate?: Object;
     resolution?: Object;
@@ -34,10 +34,10 @@ const statsEmitter = {
      */
     startListeningForStats(conference: IJitsiConference) {
         conference.on(JitsiConnectionQualityEvents.LOCAL_STATS_UPDATED,
-            (stats: Stats) => this._onStatsUpdated(conference.myUserId(), stats));
+            (stats: IStats) => this._onStatsUpdated(conference.myUserId(), stats));
 
         conference.on(JitsiConnectionQualityEvents.REMOTE_STATS_UPDATED,
-            (id: string, stats: Stats) => this._emitStatsUpdate(id, stats));
+            (id: string, stats: IStats) => this._emitStatsUpdate(id, stats));
     },
 
     /**
@@ -94,7 +94,7 @@ const statsEmitter = {
      * @param {Object} stats - New connection stats for the user.
      * @returns {void}
      */
-    _emitStatsUpdate(id: string, stats: Stats = {}) {
+    _emitStatsUpdate(id: string, stats: IStats = {}) {
         const callbacks = subscribers[id] || [];
 
         callbacks.forEach((callback: Function) => {
@@ -112,7 +112,7 @@ const statsEmitter = {
      * by the library.
      * @returns {void}
      */
-    _onStatsUpdated(localUserId: string, stats: Stats) {
+    _onStatsUpdated(localUserId: string, stats: IStats) {
         const allUserFramerates = stats.framerate || {};
         const allUserResolutions = stats.resolution || {};
         const allUserCodecs = stats.codec || {};
@@ -138,7 +138,7 @@ const statsEmitter = {
         _.union(framerateUserIds, resolutionUserIds, codecUserIds)
             .filter(id => id !== localUserId)
             .forEach(id => {
-                const remoteUserStats: Stats = {};
+                const remoteUserStats: IStats = {};
 
                 const framerate = allUserFramerates[id as keyof typeof allUserFramerates];
 

react/features/connection-stats/components/ConnectionStatsTable.tsx

@@ -17,7 +17,7 @@ type DownloadUpload = {
  * The type of the React {@code Component} props of
  * {@link ConnectionStatsTable}.
  */
-interface Props extends WithTranslation {
+interface IProps extends WithTranslation {
 
     /**
      * The audio SSRC of this client.
@@ -246,7 +246,7 @@ const styles = (theme: Theme) => {
  *
  * @augments Component
  */
-class ConnectionStatsTable extends Component<Props> {
+class ConnectionStatsTable extends Component<IProps> {
     /**
      * Implements React's {@link Component#render()}.
      *

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

@@ -48,7 +48,7 @@ const VALID_TYPES = Object.keys(TAB_LABELS);
 /**
  * The type of the React {@code Component} props of {@link DesktopPicker}.
  */
-interface Props extends WithTranslation {
+interface IProps extends WithTranslation {
 
     /**
      * An array with desktop sharing sources to be displayed.
@@ -104,13 +104,13 @@ type State = {
  *
  * @augments Component
  */
-class DesktopPicker extends PureComponent<Props, State> {
+class DesktopPicker extends PureComponent<IProps, State> {
     /**
      * Implements React's {@link Component#getDerivedStateFromProps()}.
      *
      * @inheritdoc
      */
-    static getDerivedStateFromProps(props: Props) {
+    static getDerivedStateFromProps(props: IProps) {
         return {
             types: DesktopPicker._getValidTypes(props.desktopSharingSources)
         };
@@ -151,7 +151,7 @@ class DesktopPicker extends PureComponent<Props, State> {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         // Bind event handlers so they are only bound once per instance.

react/features/display-name/components/AbstractDisplayNamePrompt.tsx

@@ -8,7 +8,7 @@ import { updateSettings } from '../../base/settings/actions';
  * The type of the React {@code Component} props of
  * {@link AbstractDisplayNamePrompt}.
  */
-export interface Props extends WithTranslation {
+export interface IProps extends WithTranslation {
 
     /**
      * Invoked to update the local participant's display name.
@@ -25,13 +25,13 @@ export interface Props extends WithTranslation {
  * Implements an abstract class for {@code DisplayNamePrompt}.
  */
 export default class AbstractDisplayNamePrompt<S>
-    extends Component<Props, S> {
+    extends Component<IProps, S> {
     /**
      * Instantiates a new component.
      *
      * @inheritdoc
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this._onSetDisplayName = this._onSetDisplayName.bind(this);

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

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

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-import { IState } from '../../../app/types';
+import { IReduxState } from '../../../app/types';
 import {
     getParticipantById,
     getParticipantDisplayName
@@ -21,7 +21,7 @@ import { appendSuffix } from '../../functions';
 /**
  * The type of the React {@code Component} props of {@link DisplayName}.
  */
-interface Props {
+interface IProps {
 
     /**
      * Whether or not the display name should be editable on click.
@@ -78,10 +78,11 @@ const DisplayName = ({
     elementID,
     participantID,
     thumbnailType
-}: Props) => {
+}: IProps) => {
     const { classes } = useStyles();
-    const configuredDisplayName = useSelector((state: IState) => getParticipantById(state, participantID))?.name ?? '';
+    const configuredDisplayName = useSelector((state: IReduxState) =>
-    const nameToDisplay = useSelector((state: IState) => getParticipantDisplayName(state, participantID));
+        getParticipantById(state, participantID))?.name ?? '';
+    const nameToDisplay = useSelector((state: IReduxState) => getParticipantDisplayName(state, participantID));
     const [ editDisplayNameValue, setEditDisplayNameValue ] = useState('');
     const [ isEditing, setIsEditing ] = useState(false);
     const dispatch = useDispatch();

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

@@ -4,7 +4,7 @@ import { translate } from '../../../base/i18n/functions';
 import { connect } from '../../../base/redux/functions';
 import Dialog from '../../../base/ui/components/web/Dialog';
 import Input from '../../../base/ui/components/web/Input';
-import AbstractDisplayNamePrompt, { Props } from '../AbstractDisplayNamePrompt';
+import AbstractDisplayNamePrompt, { IProps } from '../AbstractDisplayNamePrompt';
 
 /**
  * The type of the React {@code Component} props of {@link DisplayNamePrompt}.
@@ -30,7 +30,7 @@ class DisplayNamePrompt extends AbstractDisplayNamePrompt<State> {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {

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

@@ -5,14 +5,14 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-import { IState } from '../../../app/types';
+import { IReduxState } from '../../../app/types';
 import { isDisplayNameVisible } from '../../../base/config/functions.any';
 import {
     getLocalParticipant,
     getParticipantDisplayName,
     isWhiteboardParticipant
 } from '../../../base/participants/functions';
-import { Participant } from '../../../base/participants/types';
+import { IParticipant } from '../../../base/participants/types';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 // @ts-ignore
 import { getLargeVideoParticipant } from '../../../large-video/functions';
@@ -51,9 +51,9 @@ const useStyles = makeStyles()((theme: Theme) => {
  */
 const StageParticipantNameLabel = () => {
     const { classes, cx } = useStyles();
-    const largeVideoParticipant: Participant = useSelector(getLargeVideoParticipant);
+    const largeVideoParticipant: IParticipant = useSelector(getLargeVideoParticipant);
     const selectedId = largeVideoParticipant?.id;
-    const nameToDisplay = useSelector((state: IState) => getParticipantDisplayName(state, selectedId));
+    const nameToDisplay = useSelector((state: IReduxState) => getParticipantDisplayName(state, selectedId));
 
     const localParticipant = useSelector(getLocalParticipant);
     const localId = localParticipant?.id;

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

@@ -2,23 +2,23 @@ import React from 'react';
 import { Image, ImageStyle, StyleProp, ViewStyle } from 'react-native';
 import { SvgUri } from 'react-native-svg';
 
-import { IState } from '../../../app/types';
+import { IReduxState } from '../../../app/types';
 import { connect } from '../../../base/redux/functions';
 
 import styles from './styles';
 
 
-interface Props {
+interface IProps {
     uri?: string;
 }
 
 /**
  * Component that displays a branding background image.
  *
- * @param {Props} props - The props of the component.
+ * @param {IProps} props - The props of the component.
  * @returns {ReactElement}
  */
-const BrandingImageBackground: React.FC<Props> = ({ uri }: Props) => {
+const BrandingImageBackground: React.FC<IProps> = ({ uri }: IProps) => {
     const imageType = uri?.substr(uri.lastIndexOf('/') + 1);
     const imgSrc = uri ? uri : undefined;
 
@@ -63,9 +63,9 @@ const BrandingImageBackground: React.FC<Props> = ({ uri }: Props) => {
  *
  * @param {Object} state - The Redux state.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
-function _mapStateToProps(state: IState) {
+function _mapStateToProps(state: IReduxState) {
     const { backgroundImageUrl } = state['features/dynamic-branding'];
 
     return {

react/features/dynamic-branding/functions.any.ts

@@ -1,4 +1,4 @@
-import { IState } from '../app/types';
+import { IReduxState } from '../app/types';
 import { IStateful } from '../base/app/types';
 import { toState } from '../base/redux/functions';
 
@@ -10,7 +10,7 @@ import { toState } from '../base/redux/functions';
  * @param {Object} state - A redux state.
  * @returns {string}
  */
-export function extractFqnFromPath(state?: IState) {
+export function extractFqnFromPath(state?: IReduxState) {
     let pathname;
 
     if (window.location.pathname) {
@@ -61,6 +61,6 @@ export async function getDynamicBrandingUrl(stateful: IStateful) {
  * @param {Object} state - Global state of the app.
  * @returns {boolean}
  */
-export function isDynamicBrandingDataLoaded(state: IState) {
+export function isDynamicBrandingDataLoaded(state: IReduxState) {
     return state['features/dynamic-branding'].customizationReady;
 }

react/features/e2ee/components/E2EESection.tsx

@@ -3,7 +3,7 @@ import { WithTranslation } from 'react-i18next';
 
 import { createE2EEEvent } from '../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../analytics/functions';
-import { IState, IStore } from '../../app/types';
+import { IReduxState, IStore } from '../../app/types';
 import { translate } from '../../base/i18n/functions';
 import { connect } from '../../base/redux/functions';
 import Switch from '../../base/ui/components/web/Switch';
@@ -11,7 +11,7 @@ import { toggleE2EE } from '../actions';
 import { MAX_MODE } from '../constants';
 import { doesEveryoneSupportE2EE } from '../functions';
 
-interface Props extends WithTranslation {
+interface IProps extends WithTranslation {
 
     /**
      * The resource for the description, computed based on the maxMode and whether the switch is toggled or not.
@@ -58,13 +58,13 @@ type State = {
  *
  * @augments Component
  */
-class E2EESection extends Component<Props, State> {
+class E2EESection extends Component<IProps, State> {
     /**
      * Implements React's {@link Component#getDerivedStateFromProps()}.
      *
      * @inheritdoc
      */
-    static getDerivedStateFromProps(props: Props, state: State) {
+    static getDerivedStateFromProps(props: IProps, state: State) {
         if (props._toggled !== state.toggled) {
 
             return {
@@ -80,7 +80,7 @@ class E2EESection extends Component<Props, State> {
      *
      * @inheritdoc
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
@@ -151,9 +151,9 @@ class E2EESection extends Component<Props, State> {
  *
  * @param {Object} state - The Redux state.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
-function mapStateToProps(state: IState) {
+function mapStateToProps(state: IReduxState) {
     const { enabled: e2eeEnabled, maxMode } = state['features/e2ee'];
     const { e2eeLabels } = state['features/base/config'];
 

react/features/embed-meeting/components/EmbedMeetingDialog.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { WithTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 
-import { IState } from '../../app/types';
+import { IReduxState } from '../../app/types';
 import CopyButton from '../../base/buttons/CopyButton.web';
 import { getInviteURL } from '../../base/connection/functions';
 import { translate } from '../../base/i18n/functions';
 import Dialog from '../../base/ui/components/web/Dialog';
 
-interface Props extends WithTranslation {
+interface IProps extends WithTranslation {
 
     /**
      * The URL of the conference.
@@ -21,7 +21,7 @@ interface Props extends WithTranslation {
  *
  * @returns {React$Element<any>}
  */
-function EmbedMeeting({ t, url }: Props) {
+function EmbedMeeting({ t, url }: IProps) {
     /**
      * Get the embed code for a jitsi meeting.
      *
@@ -54,7 +54,7 @@ function EmbedMeeting({ t, url }: Props) {
     );
 }
 
-const mapStateToProps = (state: IState) => {
+const mapStateToProps = (state: IReduxState) => {
     return {
         url: getInviteURL(state)
     };

react/features/face-landmarks/FaceLandmarksHelper.ts

@@ -4,7 +4,7 @@ import { Config, FaceResult, Human } from '@vladmandic/human';
 import { DETECTION_TYPES, FACE_DETECTION_SCORE_THRESHOLD, FACE_EXPRESSIONS_NAMING_MAPPING } from './constants';
 import { DetectInput, DetectOutput, FaceBox, InitInput } from './types';
 
-export interface FaceLandmarksHelper {
+export interface IFaceLandmarksHelper {
     detect: ({ image, threshold }: DetectInput) => Promise<DetectOutput>;
     getDetectionInProgress: () => boolean;
     getDetections: (image: ImageBitmap | ImageData) => Promise<Array<FaceResult>>;
@@ -17,7 +17,7 @@ export interface FaceLandmarksHelper {
 /**
  * Helper class for human library.
  */
-export class HumanHelper implements FaceLandmarksHelper {
+export class HumanHelper implements IFaceLandmarksHelper {
     protected human: Human | undefined;
     protected faceDetectionTypes: string[];
     protected baseUrl: string;

react/features/face-landmarks/faceLandmarksWorker.ts

@@ -1,7 +1,7 @@
-import { FaceLandmarksHelper, HumanHelper } from './FaceLandmarksHelper';
+import { HumanHelper, IFaceLandmarksHelper } from './FaceLandmarksHelper';
 import { DETECT_FACE, INIT_WORKER } from './constants';
 
-let helper: FaceLandmarksHelper;
+let helper: IFaceLandmarksHelper;
 
 onmessage = async function({ data }: MessageEvent<any>) {
     switch (data.type) {

react/features/face-landmarks/functions.ts

@@ -1,4 +1,4 @@
-import { IState } from '../app/types';
+import { IReduxState } from '../app/types';
 import { getLocalParticipant } from '../base/participants/functions';
 import { extractFqnFromPath } from '../dynamic-branding/functions.any';
 
@@ -89,7 +89,7 @@ export function sendFaceExpressionToServer(
  * @param  {Object} state - Redux state.
  * @returns {boolean} - True if sent, false otherwise.
  */
-export async function sendFaceExpressionsWebhook(state: IState) {
+export async function sendFaceExpressionsWebhook(state: IReduxState) {
     const { webhookProxyUrl: url } = state['features/base/config'];
     const { conference } = state['features/base/conference'];
     const { jwt } = state['features/base/jwt'];
@@ -191,21 +191,21 @@ export async function sendDataToWorker(
  * Gets face box for a participant id.
  *
  * @param {string} id - The participant id.
- * @param {IState} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {Object}
  */
-function getFaceBoxForId(id: string, state: IState) {
+function getFaceBoxForId(id: string, state: IReduxState) {
     return state['features/face-landmarks'].faceBoxes[id];
 }
 
 /**
  * Gets the video object position for a participant id.
  *
- * @param {IState} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @param {string} id - The participant id.
  * @returns {string} - CSS object-position in the shape of '{horizontalPercentage}% {verticalPercentage}%'.
  */
-export function getVideoObjectPosition(state: IState, id?: string) {
+export function getVideoObjectPosition(state: IReduxState, id?: string) {
     const faceBox = id && getFaceBoxForId(id, state);
 
     if (faceBox) {
@@ -222,10 +222,10 @@ export function getVideoObjectPosition(state: IState, id?: string) {
 /**
  * Gets the video object position for a participant id.
  *
- * @param {IState} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {number} - Number of milliseconds for doing face detection.
  */
-export function getDetectionInterval(state: IState) {
+export function getDetectionInterval(state: IReduxState) {
     const { faceLandmarks } = state['features/base/config'];
 
     return Math.max(faceLandmarks?.captureInterval || SEND_IMAGE_INTERVAL_MS);
@@ -234,10 +234,10 @@ export function getDetectionInterval(state: IState) {
 /**
  * Returns the duration in seconds of a face expression.
  *
- * @param {IState} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @param {number} faceExpressionCount - The number of consecutive face expressions.
  * @returns {number} - Duration of face expression in seconds.
  */
-export function getFaceExpressionDuration(state: IState, faceExpressionCount: number) {
+export function getFaceExpressionDuration(state: IReduxState, faceExpressionCount: number) {
     return faceExpressionCount * (getDetectionInterval(state) / 1000);
 }

react/features/face-landmarks/middleware.ts

@@ -6,7 +6,7 @@ import {
 import { getCurrentConference } from '../base/conference/functions';
 import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
 import { getLocalParticipant, getParticipantCount } from '../base/participants/functions';
-import { Participant } from '../base/participants/types';
+import { IParticipant } from '../base/participants/types';
 import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 import { TRACK_ADDED, TRACK_REMOVED, TRACK_UPDATED } from '../base/tracks/actionTypes';
 
@@ -32,7 +32,7 @@ MiddlewareRegistry.register((store: IStore) => (next: Function) => (action: any)
         // allow using remote face centering data when local face centering is not enabled
         action.conference.on(
             JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED,
-            (participant: Participant | undefined, eventData: any) => {
+            (participant: IParticipant | undefined, eventData: any) => {
                 if (!participant || !eventData || !participant.getId) {
                     return;
                 }

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

@@ -8,13 +8,13 @@ import { FixedSizeGrid, FixedSizeList } from 'react-window';
 
 import { ACTION_SHORTCUT_TRIGGERED, createShortcutEvent, createToolbarEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
-import { IState, IStore } from '../../../app/types';
+import { IReduxState, IStore } from '../../../app/types';
 import { getSourceNameSignalingFeatureFlag, getToolbarButtons } from '../../../base/config/functions.web';
 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';
-import { Participant } from '../../../base/participants/types';
+import { IParticipant } from '../../../base/participants/types';
 import { connect } from '../../../base/redux/functions';
 import { shouldHideSelfView } from '../../../base/settings/functions.any';
 // @ts-ignore
@@ -62,7 +62,7 @@ declare let APP: any;
 /**
  * The type of the React {@code Component} props of {@link Filmstrip}.
  */
-interface Props extends WithTranslation {
+interface IProps extends WithTranslation {
 
     /**
      * Additional CSS class names top add to the root.
@@ -122,7 +122,7 @@ interface Props extends WithTranslation {
     /**
      * The local screen share participant. This prop is behind the sourceNameSignaling feature flag.
      */
-    _localScreenShare: Participant;
+    _localScreenShare: IParticipant;
 
     /**
      * Whether or not the filmstrip videos should currently be displayed.
@@ -264,7 +264,7 @@ type State = {
  *
  * @augments Component
  */
-class Filmstrip extends PureComponent <Props, State> {
+class Filmstrip extends PureComponent <IProps, State> {
 
     _throttledResize: Function;
 
@@ -274,7 +274,7 @@ class Filmstrip extends PureComponent <Props, State> {
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Props) {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
@@ -878,9 +878,9 @@ class Filmstrip extends PureComponent <Props, State> {
  * @param {Object} state - The Redux state.
  * @param {Object} ownProps - The own props of the component.
  * @private
- * @returns {Props}
+ * @returns {IProps}
  */
-function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
+function _mapStateToProps(state: IReduxState, ownProps: Partial<IProps>) {
     const { _hasScroll = false, filmstripType, _topPanelFilmstrip, _remoteParticipants } = ownProps;
     const toolbarButtons = getToolbarButtons(state);
     const { testing = {}, iAmRecorder } = state['features/base/config'];

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-import { IState } from '../../../app/types';
+import { IReduxState } from '../../../app/types';
 import { IconPinParticipant } from '../../../base/icons/svg';
 import { getParticipantById } from '../../../base/participants/functions';
 import BaseIndicator from '../../../base/react/components/web/BaseIndicator';
@@ -56,7 +56,7 @@ const PinnedIndicator = ({
     tooltipPosition
 }: Props) => {
     const stageFilmstrip = useSelector(isStageFilmstripAvailable);
-    const pinned = useSelector((state: IState) => getParticipantById(state, participantId))?.pinned;
+    const pinned = useSelector((state: IReduxState) => getParticipantById(state, participantId))?.pinned;
     const activePinnedParticipants: Array<{ participantId: string; pinned: boolean; }>
         = useSelector(getPinnedActiveParticipants);
     const isPinned = activePinnedParticipants.find(p => p.participantId === participantId);

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

@@ -3,10 +3,10 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-import { IState } from '../../../app/types';
+import { IReduxState } from '../../../app/types';
 import { IconRaisedHand } from '../../../base/icons/svg';
 import { getParticipantById, hasRaisedHand } from '../../../base/participants/functions';
-import { Participant } from '../../../base/participants/types';
+import { IParticipant } from '../../../base/participants/types';
 import BaseIndicator from '../../../base/react/components/web/BaseIndicator';
 
 /**
@@ -54,7 +54,7 @@ const RaisedHandIndicator = ({
     participantId,
     tooltipPosition
 }: Props) => {
-    const participant: Participant | undefined = useSelector((state: IState) =>
+    const participant: IParticipant | undefined = useSelector((state: IReduxState) =>
         getParticipantById(state, participantId));
     const _raisedHand = hasRaisedHand(participant);
     const { classes: styles, theme } = useStyles();

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

@@ -8,7 +8,7 @@ import { connect } from 'react-redux';
 
 import { createScreenSharingIssueEvent } from '../../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../../analytics/functions';
-import { IState } from '../../../app/types';
+import { IReduxState } from '../../../app/types';
 // @ts-ignore
 import { Avatar } from '../../../base/avatar';
 import {
@@ -29,7 +29,7 @@ import {
     isScreenShareParticipant,
     isWhiteboardParticipant
 } from '../../../base/participants/functions';
-import { Participant } from '../../../base/participants/types';
+import { IParticipant } from '../../../base/participants/types';
 import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
 import { isTestModeEnabled } from '../../../base/testing/functions';
 import { trackStreamingStatusChanged, updateLastTrackVideoMediaEvent } from '../../../base/tracks/actions';
@@ -198,7 +198,7 @@ export type Props = {
     /**
      * An object with information about the participant related to the thumbnail.
      */
-    _participant: Participant;
+    _participant: IParticipant;
 
     /**
      * Whether or not the participant has the hand raised.
@@ -1171,7 +1171,7 @@ class Thumbnail extends Component<Props, State> {
  * @private
  * @returns {Props}
  */
-function _mapStateToProps(state: IState, ownProps: any): Object {
+function _mapStateToProps(state: IReduxState, ownProps: any): Object {
     const { participantID, filmstripType = FILMSTRIP_TYPE.MAIN } = ownProps;
 
     const participant = getParticipantByIdOrUndefined(state, participantID);

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

@@ -4,7 +4,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-import { IState } from '../../../app/types';
+import { IReduxState } from '../../../app/types';
 import {
     getMultipleVideoSupportFeatureFlag,
     isDisplayNameVisible,
@@ -79,7 +79,7 @@ const ThumbnailBottomIndicators = ({
     const _isMultiStreamEnabled = useSelector(getMultipleVideoSupportFeatureFlag);
     const _showDisplayName = useSelector(isDisplayNameVisible);
     const isVirtualScreenshareParticipant = useSelector(
-        (state: IState) => isScreenShareParticipantById(state, participantId)
+        (state: IReduxState) => isScreenShareParticipantById(state, participantId)
     );
 
     return (<div className = { className }>