ref(eslint) Use new TypeScript ESlint config (#12143)

Use new TS config from @jitsi/eslint
Fix all lint errors

package-lock.json

@@ -137,7 +137,7 @@
         "@babel/preset-flow": "7.16.0",
         "@babel/preset-react": "7.16.0",
         "@babel/runtime": "7.16.0",
-        "@jitsi/eslint-config": "4.0.0",
+        "@jitsi/eslint-config": "4.1.2",
         "@types/js-md5": "0.4.3",
         "@types/lodash": "4.14.182",
         "@types/react": "17.0.14",
@@ -3447,9 +3447,9 @@
       }
     },
     "node_modules/@jitsi/eslint-config": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@jitsi/eslint-config/-/eslint-config-4.0.0.tgz",
-      "integrity": "sha512-DGk6HiaYUDWM5YNLuzPZ0oxFzI1BvgbS7ogi1KR6nUB1pdoQY2dFL73J3hm7QgNZbc7+x/xhXwnNk9f2aAaVTQ==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@jitsi/eslint-config/-/eslint-config-4.1.2.tgz",
+      "integrity": "sha512-kAkCLEKSWdwqj8L026T/5+FttvPLmNkPPETfgzG4SxWdkIVsW8wqFN/RypUZp2H7NmL5AgVL+QkXQXoEoQgW8A==",
       "dev": true,
       "peerDependencies": {
         "@babel/eslint-parser": ">= 7",
@@ -22389,9 +22389,9 @@
       }
     },
     "@jitsi/eslint-config": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@jitsi/eslint-config/-/eslint-config-4.0.0.tgz",
-      "integrity": "sha512-DGk6HiaYUDWM5YNLuzPZ0oxFzI1BvgbS7ogi1KR6nUB1pdoQY2dFL73J3hm7QgNZbc7+x/xhXwnNk9f2aAaVTQ==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@jitsi/eslint-config/-/eslint-config-4.1.2.tgz",
+      "integrity": "sha512-kAkCLEKSWdwqj8L026T/5+FttvPLmNkPPETfgzG4SxWdkIVsW8wqFN/RypUZp2H7NmL5AgVL+QkXQXoEoQgW8A==",
       "dev": true
     },
     "@jitsi/js-utils": {

package.json

@@ -142,7 +142,7 @@
     "@babel/preset-flow": "7.16.0",
     "@babel/preset-react": "7.16.0",
     "@babel/runtime": "7.16.0",
-    "@jitsi/eslint-config": "4.0.0",
+    "@jitsi/eslint-config": "4.1.2",
     "@types/js-md5": "0.4.3",
     "@types/lodash": "4.14.182",
     "@types/react": "17.0.14",

react/.eslintrc.js

@@ -9,27 +9,7 @@ module.exports = {
     'overrides': [
         {
             'files': [ '*.ts', '*.tsx' ],
-            parser: '@typescript-eslint/parser',
-            rules: {
-                'no-undef': 'off',
-                'no-use-before-define': 'off',
-                '@typescript-eslint/ban-ts-comment': 'off',
-                '@typescript-eslint/no-empty-function': 'off',
-                '@typescript-eslint/ban-types': 'off',
-                '@typescript-eslint/no-explicit-any': 'off',
-                'no-prototype-builtins': 'off',
-                'no-shadow': 'off',
-                '@typescript-eslint/no-shadow': [ 'error' ],
-                'typescript-sort-keys/interface': 'error',
-                'typescript-sort-keys/string-enum': 'error',
-                'object-curly-spacing': 'off',
-                '@typescript-eslint/object-curly-spacing': [ 'error', 'always' ]
-            },
-            'plugins': [ '@typescript-eslint', 'typescript-sort-keys' ],
-            'extends': [
-                'plugin:@typescript-eslint/eslint-recommended',
-                'plugin:@typescript-eslint/recommended'
-            ]
+            extends: [ '@jitsi/eslint-config/typescript' ]
         }
     ],
     'rules': {

react/features/analytics/AnalyticsEvents.ts

@@ -311,7 +311,7 @@ export function createInviteDialogEvent(
  * @returns {Object}
  */
 export function createNetworkInfoEvent({ isOnline, networkType, details }:
-    { details?: Object, isOnline: boolean, networkType?: string }) {
+    { details?: Object; isOnline: boolean; networkType?: string; }) {
     const attributes: {
         details?: Object;
         isOnline: boolean;
@@ -471,11 +471,11 @@ export function createLiveStreamingDialogEvent(dialogName: string, buttonName: s
  * sendAnalytics.
  */
 export function createLocalTracksDurationEvent(duration: {
-    audio: { value: number };
-    conference: { value: number };
+    audio: { value: number; };
+    conference: { value: number; };
     video: {
-        camera: { value: number };
-        desktop: { value: number };
+        camera: { value: number; };
+        desktop: { value: number; };
     };
 }) {
     const { audio, video, conference } = duration;

react/features/analytics/functions.ts

@@ -67,7 +67,7 @@ export function resetAnalytics() {
  * @param {Store} store - The redux store in which the specified {@code action} is being dispatched.
  * @returns {Promise} Resolves with the handlers that have been successfully loaded.
  */
-export async function createHandlers({ getState }: { getState: Function }) {
+export async function createHandlers({ getState }: { getState: Function; }) {
     getJitsiMeetGlobalNS().analyticsHandlers = [];
 
     if (!isAnalyticsEnabled(getState)) {
@@ -98,15 +98,15 @@ export async function createHandlers({ getState }: { getState: Function }) {
     const handlerConstructorOptions = {
         amplitudeAPPKey,
         blackListedEvents,
-        envType: (deploymentInfo && deploymentInfo.envType) || 'dev',
+        envType: deploymentInfo?.envType || 'dev',
         googleAnalyticsTrackingId,
         matomoEndpoint,
         matomoSiteID,
         group,
         host,
-        product: deploymentInfo && deploymentInfo.product,
-        subproduct: deploymentInfo && deploymentInfo.environment,
-        user: user && user.id,
+        product: deploymentInfo?.product,
+        subproduct: deploymentInfo?.environment,
+        user: user?.id,
         version: JitsiMeetJS.version,
         whiteListedEvents
     };

react/features/analytics/handlers/AbstractHandler.ts

@@ -2,8 +2,8 @@ export interface IEvent {
     action?: string;
     actionSubject?: string;
     attributes?: {
-        [key: string]: string|undefined;
-    },
+        [key: string]: string | undefined;
+    };
     name?: string;
     source?: string;
     type?: string;
@@ -30,8 +30,8 @@ interface Options {
  */
 export default class AbstractHandler {
     _enabled: boolean;
-    _whiteListedEvents: Array<string>|undefined;
-    _blackListedEvents: Array<string>|undefined;
+    _whiteListedEvents: Array<string> | undefined;
+    _blackListedEvents: Array<string> | undefined;
 
     /**
      * Creates new instance.

react/features/analytics/handlers/GoogleAnalyticsHandler.ts

@@ -67,7 +67,7 @@ class GoogleAnalyticsHandler extends AbstractHandler {
      * @private
      */
     _extractValue(event: IEvent) {
-        let value: string|number|undefined = event && event.attributes && event.attributes.value;
+        let value: string | number | undefined = event?.attributes?.value;
 
         // Try to extract an integer from the "value" attribute.
         value = Math.round(parseFloat(value ?? ''));

react/features/analytics/handlers/MatomoHandler.ts

@@ -88,7 +88,7 @@ export default class MatomoHandler extends AbstractHandler {
      * @private
      */
     _extractValue(event: IEvent) {
-        const value = event && event.attributes && event.attributes.value;
+        const value = event?.attributes?.value;
 
         // Try to extract an integer from the 'value' attribute.
         return Math.round(parseFloat(value ?? ''));
@@ -152,7 +152,8 @@ export default class MatomoHandler extends AbstractHandler {
         }
 
         const value = this._extractValue(event);
-        const matomoEvent: Array<string|number|undefined> = [ 'trackEvent', 'jitsi-meet', this._extractName(event) ];
+        const matomoEvent: Array<string | number | undefined> = [
+            'trackEvent', 'jitsi-meet', this._extractName(event) ];
 
         if (!isNaN(value)) {
             matomoEvent.push(value);

react/features/analytics/reducer.ts

@@ -29,19 +29,19 @@ const DEFAULT_STATE = {
 };
 
 interface Value {
-    startedTime: number,
-    value: number
+    startedTime: number;
+    value: number;
 }
 
 export interface IAnalyticsState {
     localTracksDuration: {
-        audio: Value,
-        conference: Value,
+        audio: Value;
+        conference: Value;
         video: {
-            camera: Value,
-            desktop: Value
-        }
-    }
+            camera: Value;
+            desktop: Value;
+        };
+    };
 }
 
 /**

react/features/app/types.ts

@@ -73,86 +73,86 @@ import { IVideoSipGW } from '../videosipgw/reducer';
 import { IVirtualBackground } from '../virtual-background/reducer';
 
 export interface IStore {
-    dispatch: Function,
+    dispatch: Function;
     getState: () => IState;
 }
 
 export interface IState {
-    'features/analytics': IAnalyticsState,
-    'features/authentication': IAuthenticationState,
-    'features/av-moderation': IAVModerationState,
-    'features/background': IBackgroundState,
-    'features/base/app': IAppState,
-    'features/base/audio-only': IAudioOnlyState,
-    'features/base/conference': IConferenceState,
-    'features/base/config': IConfigState,
-    'features/base/connection': IConnectionState,
-    'features/base/devices': IDevicesState,
-    'features/base/dialog': IDialogState,
-    'features/base/flags': IFlagsState,
-    'features/base/jwt': IJwtState,
-    'features/base/known-domains': IKnownDomainsState,
-    'features/base/lastn': ILastNState,
-    'features/base/lib-jitsi-meet': ILibJitsiMeetState,
-    'features/base/logging': ILoggingState,
-    'features/base/media': IMediaState,
-    'features/base/net-info': INetInfoState,
-    'features/base/no-src-data': INoSrcDataState,
-    'features/base/participants': IParticipantsState,
-    'features/base/responsive-ui': IResponsiveUIState,
-    'features/base/settings': ISettingsState,
-    'features/base/sounds': ISoundsState,
-    'features/base/tracks': ITracksState,
-    'features/base/user-interaction': IUserInteractionState,
-    'features/breakout-rooms': IBreakoutRoomsState,
-    'features/calendar-sync': ICalendarSyncState,
-    'features/call-integration': ICallIntegrationState,
-    'features/chat': IChatState,
-    'features/deep-linking': IDeepLinkingState,
-    'features/dropbox': IDropboxState,
-    'features/dynamic-branding': IDynamicBrandingState,
-    'features/e2ee': IE2EEState,
-    'features/etherpad': IEtherpadState,
-    'features/face-landmarks': IFaceLandmarksState,
-    'features/feedback': IFeedbackState,
-    'features/filmstrip': IFilmstripState,
-    'features/follow-me': IFollowMeState,
-    'features/full-screen': IFullScreenState,
-    'features/gifs': IGifsState,
-    'features/google-api': IGoogleApiState,
-    'features/invite': IInviteState,
-    'features/jaas': IJaaSState,
-    'features/large-video': ILargeVideoState,
-    'features/lobby': ILobbyState,
-    'features/mobile/audio-mode': IMobileAudioModeState,
-    'features/mobile/external-api': IMobileExternalApiState,
-    'features/mobile/watchos': IMobileWatchOSState,
-    'features/no-audio-signal': INoAudioSignalState,
-    'features/noise-detection': INoiseDetectionState,
-    'features/noise-suppression': INoiseSuppressionState,
-    'features/notifications': INotificationsState,
-    'features/overlay': IOverlayState,
-    'features/participants-pane': IParticipantsState,
-    'features/polls': IPollsState,
-    'features/power-monitor': IPowerMonitorState,
-    'features/prejoin': IPrejoinState,
-    'features/reactions': IReactionsState,
-    'features/recent-list': IRecentListState,
-    'features/recording': IRecordingState,
-    'features/remote-control': IRemoteControlState,
-    'features/screen-share': IScreenShareState,
-    'features/screenshot-capture': IScreenshotCaptureState,
-    'features/settings': ISettingsState,
-    'features/shared-video': ISharedVideoState,
-    'features/speaker-stats': ISpeakerStatsState,
-    'features/subtitles': ISubtitlesState,
-    'features/talk-while-muted': ITalkWhileMutedState,
-    'features/testing': ITestingState,
-    'features/toolbox': IToolboxState,
-    'features/transcribing': ITranscribingState,
-    'features/video-layout': IVideoLayoutState,
-    'features/video-quality': IVideoQualityState,
-    'features/video-quality-persistent-storage': IVideoQualityPersistedState,
-    'features/videosipgw': IVideoSipGW,
-    'features/virtual-background': IVirtualBackground
+    'features/analytics': IAnalyticsState;
+    'features/authentication': IAuthenticationState;
+    'features/av-moderation': IAVModerationState;
+    'features/background': IBackgroundState;
+    'features/base/app': IAppState;
+    'features/base/audio-only': IAudioOnlyState;
+    'features/base/conference': IConferenceState;
+    'features/base/config': IConfigState;
+    'features/base/connection': IConnectionState;
+    'features/base/devices': IDevicesState;
+    'features/base/dialog': IDialogState;
+    'features/base/flags': IFlagsState;
+    'features/base/jwt': IJwtState;
+    'features/base/known-domains': IKnownDomainsState;
+    'features/base/lastn': ILastNState;
+    'features/base/lib-jitsi-meet': ILibJitsiMeetState;
+    'features/base/logging': ILoggingState;
+    'features/base/media': IMediaState;
+    'features/base/net-info': INetInfoState;
+    'features/base/no-src-data': INoSrcDataState;
+    'features/base/participants': IParticipantsState;
+    'features/base/responsive-ui': IResponsiveUIState;
+    'features/base/settings': ISettingsState;
+    'features/base/sounds': ISoundsState;
+    'features/base/tracks': ITracksState;
+    'features/base/user-interaction': IUserInteractionState;
+    'features/breakout-rooms': IBreakoutRoomsState;
+    'features/calendar-sync': ICalendarSyncState;
+    'features/call-integration': ICallIntegrationState;
+    'features/chat': IChatState;
+    'features/deep-linking': IDeepLinkingState;
+    'features/dropbox': IDropboxState;
+    'features/dynamic-branding': IDynamicBrandingState;
+    'features/e2ee': IE2EEState;
+    'features/etherpad': IEtherpadState;
+    'features/face-landmarks': IFaceLandmarksState;
+    'features/feedback': IFeedbackState;
+    'features/filmstrip': IFilmstripState;
+    'features/follow-me': IFollowMeState;
+    'features/full-screen': IFullScreenState;
+    'features/gifs': IGifsState;
+    'features/google-api': IGoogleApiState;
+    'features/invite': IInviteState;
+    'features/jaas': IJaaSState;
+    'features/large-video': ILargeVideoState;
+    'features/lobby': ILobbyState;
+    'features/mobile/audio-mode': IMobileAudioModeState;
+    'features/mobile/external-api': IMobileExternalApiState;
+    'features/mobile/watchos': IMobileWatchOSState;
+    'features/no-audio-signal': INoAudioSignalState;
+    'features/noise-detection': INoiseDetectionState;
+    'features/noise-suppression': INoiseSuppressionState;
+    'features/notifications': INotificationsState;
+    'features/overlay': IOverlayState;
+    'features/participants-pane': IParticipantsState;
+    'features/polls': IPollsState;
+    'features/power-monitor': IPowerMonitorState;
+    'features/prejoin': IPrejoinState;
+    'features/reactions': IReactionsState;
+    'features/recent-list': IRecentListState;
+    'features/recording': IRecordingState;
+    'features/remote-control': IRemoteControlState;
+    'features/screen-share': IScreenShareState;
+    'features/screenshot-capture': IScreenshotCaptureState;
+    'features/settings': ISettingsState;
+    'features/shared-video': ISharedVideoState;
+    'features/speaker-stats': ISpeakerStatsState;
+    'features/subtitles': ISubtitlesState;
+    'features/talk-while-muted': ITalkWhileMutedState;
+    'features/testing': ITestingState;
+    'features/toolbox': IToolboxState;
+    'features/transcribing': ITranscribingState;
+    'features/video-layout': IVideoLayoutState;
+    'features/video-quality': IVideoQualityState;
+    'features/video-quality-persistent-storage': IVideoQualityPersistedState;
+    'features/videosipgw': IVideoSipGW;
+    'features/virtual-background': IVirtualBackground;
 }

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

@@ -31,43 +31,43 @@ interface Props extends WithTranslation {
      * {@link JitsiConference} That needs authentication - will hold a valid
      * value in XMPP login + guest access mode.
      */
-    _conference: Object,
+    _conference: Object;
 
     /**
      * The server hosts specified in the global config.
      */
-    _configHosts: IConfig['hosts'],
+    _configHosts: IConfig['hosts'];
 
     /**
      * Indicates if the dialog should display "connecting" status message.
      */
-    _connecting: boolean,
+    _connecting: boolean;
 
     /**
      * The error which occurred during login/authentication.
      */
-    _error: any,
+    _error: any;
 
     /**
      * The progress in the floating range between 0 and 1 of the authenticating
      * and upgrading the role of the local participant/user.
      */
-    _progress: number,
+    _progress: number;
 
     /**
      * Redux store dispatch method.
      */
-    dispatch: Dispatch<any>,
+    dispatch: Dispatch<any>;
 
     /**
      * Invoked when username and password are submitted.
      */
-    onSuccess: Function,
+    onSuccess: Function;
 
     /**
      * Conference room name.
      */
-    roomName: string
+    roomName: string;
 }
 
 /**
@@ -78,18 +78,18 @@ type State = {
     /**
      * Authentication process starts before joining the conference room.
      */
-    loginStarted: boolean,
+    loginStarted: boolean;
 
     /**
      * The user entered password for the conference.
      */
-    password: string,
+    password: string;
 
     /**
      * The user entered local participant name.
      */
-    username: string
-}
+    username: string;
+};
 
 /**
  * Component that renders the login in conference dialog.
@@ -156,7 +156,7 @@ class LoginDialog extends Component<Props, State> {
 
             connect(jid, password, roomName)
                 .then((connection: any) => {
-                    onSuccess && onSuccess(connection);
+                    onSuccess?.(connection);
                 })
                 .catch(() => {
                     this.setState({

react/features/authentication/reducer.ts

@@ -10,9 +10,9 @@ import {
 } from './actionTypes';
 
 export interface IAuthenticationState {
-    error?: Object|undefined;
-    progress?: number|undefined;
-    thenableWithCancel?: Object|undefined;
+    error?: Object | undefined;
+    progress?: number | undefined;
+    thenableWithCancel?: Object | undefined;
     waitForOwnerTimeoutID?: number;
 }
 

react/features/av-moderation/constants.ts

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

react/features/av-moderation/reducer.ts

@@ -30,13 +30,13 @@ const initialState = {
 
 export interface IAVModerationState {
     audioModerationEnabled: boolean;
-    audioUnmuteApproved?: boolean|undefined;
-    audioWhitelist: { [id: string]: boolean };
-    pendingAudio: Array<{ id: string }>;
-    pendingVideo: Array<{ id: string }>;
+    audioUnmuteApproved?: boolean | undefined;
+    audioWhitelist: { [id: string]: boolean; };
+    pendingAudio: Array<{ id: string; }>;
+    pendingVideo: Array<{ id: string; }>;
     videoModerationEnabled: boolean;
-    videoUnmuteApproved?: boolean|undefined;
-    videoWhitelist: { [id: string]: boolean };
+    videoUnmuteApproved?: boolean | undefined;
+    videoWhitelist: { [id: string]: boolean; };
 }
 
 /**
@@ -52,7 +52,7 @@ function _updatePendingParticipant(mediaType: MediaType, participant: Participan
     let arrayItemChanged = false;
     const storeKey = MEDIA_TYPE_TO_PENDING_STORE_KEY[mediaType];
     const arr = state[storeKey];
-    const newArr = arr.map((pending: { id: string }) => {
+    const newArr = arr.map((pending: { id: string; }) => {
         if (pending.id === participant.id) {
             arrayItemChanged = true;
 

react/features/base/app/reducer.ts

@@ -3,7 +3,7 @@ import ReducerRegistry from '../redux/ReducerRegistry';
 import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from './actionTypes';
 
 export interface IAppState {
-    app?: Object|undefined;
+    app?: Object | undefined;
 }
 
 ReducerRegistry.register<IAppState>('features/base/app', (state = {}, action): IAppState => {

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

@@ -3,7 +3,7 @@ import ReducerRegistry from '../redux/ReducerRegistry';
 import { SET_AUDIO_ONLY } from './actionTypes';
 
 export interface IAudioOnlyState {
-    enabled: boolean
+    enabled: boolean;
 }
 
 const DEFAULT_STATE = {

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

@@ -5,22 +5,22 @@ export type Props = {
     /**
      * Color of the (initials based) avatar, if needed.
      */
-    color?: string,
+    color?: string;
 
     /**
      * Initials to be used to render the initials based avatars.
      */
-    initials?: string,
+    initials?: string;
 
     /**
      * Callback to signal the failure of the loading of the URL.
      */
-    onAvatarLoadError?: Function,
+    onAvatarLoadError?: Function;
 
     /**
      * Additional parameters to be passed to onAvatarLoadError function.
      */
-    onAvatarLoadErrorParams?: Object,
+    onAvatarLoadErrorParams?: Object;
 
     /**
      * Expected size of the avatar.
@@ -30,7 +30,7 @@ export type Props = {
     /**
      * The URL of the avatar to render.
      */
-    url?: string|Function
+    url?: string | Function;
 };
 
 /**

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

@@ -11,37 +11,37 @@ type Props = AbstractProps & {
     /**
      * External class name passed through props.
      */
-    className?: string,
+    className?: string;
 
     /**
      * An object containing the CSS classes.
      */
-    classes: any,
+    classes: any;
 
     /**
      * The default avatar URL if we want to override the app bundled one (e.g. AlwaysOnTop).
      */
-    defaultAvatar?: string,
+    defaultAvatar?: string;
 
     /**
      * ID of the component to be rendered.
      */
-    id?: string,
+    id?: string;
 
     /**
      * One of the expected status strings (e.g. 'available') to render a badge on the avatar, if necessary.
      */
-    status?: string,
+    status?: string;
 
     /**
      * TestId of the element, if any.
      */
-    testId?: string,
+    testId?: string;
 
     /**
      * Indicates whether to load the avatar using CORS or not.
      */
-    useCORS?: boolean
+    useCORS?: boolean;
 };
 
 /**

react/features/base/avatar/functions.ts

@@ -22,8 +22,8 @@ const splitter = new GraphemeSplitter();
  * @param {Array<string>} customAvatarBackgrounds - Custom avatar background values.
  * @returns {string}
  */
-export function getAvatarColor(initials: string|undefined, customAvatarBackgrounds: Array<string>) {
-    const hasCustomAvatarBackgronds = customAvatarBackgrounds && customAvatarBackgrounds.length;
+export function getAvatarColor(initials: string | undefined, customAvatarBackgrounds: Array<string>) {
+    const hasCustomAvatarBackgronds = customAvatarBackgrounds?.length;
     const colorsBase = hasCustomAvatarBackgronds ? customAvatarBackgrounds : AVATAR_COLORS;
 
     let colorIndex = 0;

react/features/base/buttons/CopyButton.tsx

@@ -59,37 +59,37 @@ type Props = {
     /**
      * Css class to apply on container.
      */
-    className: string,
+    className: string;
 
     /**
      * An object containing the CSS classes.
      */
-    classes: any,
+    classes: any;
 
     /**
      * The displayed text.
      */
-    displayedText: string,
+    displayedText: string;
 
     /**
      * The id of the button.
      */
-    id?: string,
+    id?: string;
 
     /**
      * The text displayed on copy success.
      */
-    textOnCopySuccess: string,
+    textOnCopySuccess: string;
 
     /**
      * The text displayed on mouse hover.
      */
-    textOnHover: string,
+    textOnHover: string;
 
     /**
      * The text that needs to be copied (might differ from the displayedText).
      */
-    textToCopy: string
+    textToCopy: string;
 };
 
 /**

react/features/base/components/context-menu/ContextMenu.tsx

@@ -17,67 +17,67 @@ type Props = {
     /**
      * Accessibility label for menu container.
      */
-    accessibilityLabel?: string,
+    accessibilityLabel?: string;
 
     /**
      * Children of the context menu.
      */
-    children: ReactNode,
+    children: ReactNode;
 
     /**
      * Class name for context menu. Used to overwrite default styles.
      */
-    className?: string,
+    className?: string;
 
     /**
      * The entity for which the context menu is displayed.
      */
-    entity?: Object,
+    entity?: Object;
 
     /**
      * Whether or not the menu is hidden. Used to overwrite the internal isHidden.
      */
-    hidden?: boolean,
+    hidden?: boolean;
 
     /**
      * Whether or not the menu is already in a drawer.
      */
-    inDrawer?: boolean,
+    inDrawer?: boolean;
 
     /**
      * Whether or not drawer should be open.
      */
-    isDrawerOpen?: boolean,
+    isDrawerOpen?: boolean;
 
     /**
      * Target elements against which positioning calculations are made.
      */
-    offsetTarget?: HTMLElement,
+    offsetTarget?: HTMLElement;
 
     /**
      * Callback for click on an item in the menu.
      */
-    onClick?: (e?: React.MouseEvent) => void,
+    onClick?: (e?: React.MouseEvent) => void;
 
     /**
      * Callback for drawer close.
      */
-    onDrawerClose?: (e?: React.MouseEvent) => void,
+    onDrawerClose?: (e?: React.MouseEvent) => void;
 
     /**
      * Keydown handler.
      */
-    onKeyDown?: (e?: React.KeyboardEvent) => void,
+    onKeyDown?: (e?: React.KeyboardEvent) => void;
 
     /**
      * Callback for the mouse entering the component.
      */
-    onMouseEnter?: (e?: React.MouseEvent) => void,
+    onMouseEnter?: (e?: React.MouseEvent) => void;
 
     /**
      * Callback for the mouse leaving the component.
      */
-    onMouseLeave?: (e?: React.MouseEvent) => void
+    onMouseLeave?: (e?: React.MouseEvent) => void;
 };
 
 const MAX_HEIGHT = 400;

react/features/base/components/context-menu/ContextMenuItem.tsx

@@ -12,64 +12,64 @@ export type Props = {
     /**
      * Label used for accessibility.
      */
-    accessibilityLabel: string,
+    accessibilityLabel: string;
 
     /**
      * CSS class name used for custom styles.
      */
-    className?: string,
+    className?: string;
 
     /**
      * Custom icon. If used, the icon prop is ignored.
      * Used to allow custom children instead of just the default icons.
      */
-    customIcon?: ReactNode,
+    customIcon?: ReactNode;
 
     /**
      * Whether or not the action is disabled.
      */
-    disabled?: boolean,
+    disabled?: boolean;
 
     /**
      * Default icon for action.
      */
-    icon?: Function,
+    icon?: Function;
 
     /**
      * Id of the action container.
      */
-    id?: string,
+    id?: string;
 
     /**
      * Click handler.
      */
-    onClick?: (e?: React.MouseEvent) => void,
+    onClick?: (e?: React.MouseEvent) => void;
 
     /**
      * Keydown handler.
      */
-    onKeyDown?: (e?: React.KeyboardEvent) => void,
+    onKeyDown?: (e?: React.KeyboardEvent) => void;
 
     /**
      * Keypress handler.
      */
-    onKeyPress?: (e?: React.KeyboardEvent) => void,
+    onKeyPress?: (e?: React.KeyboardEvent) => void;
 
     /**
      * TestId of the element, if any.
      */
-    testId?: string,
+    testId?: string;
 
     /**
      * Action text.
      */
-    text: string,
+    text: string;
 
     /**
      * Class name for the text.
      */
-    textClassName?: string
-}
+    textClassName?: string;
+};
 
 const useStyles = makeStyles((theme: any) => {
     return {

react/features/base/components/context-menu/ContextMenuItemGroup.tsx

@@ -9,12 +9,12 @@ type Props = {
     /**
      * List of actions in this group.
      */
-    actions?: Array<ItemProps>,
+    actions?: Array<ItemProps>;
 
     /**
      * The children of the component.
      */
-    children?: ReactNode,
+    children?: ReactNode;
 };
 
 const useStyles = makeStyles((theme: any) => {
@@ -40,7 +40,7 @@ const ContextMenuItemGroup = ({
     return (
         <div className = { styles.contextMenuItemGroup }>
             {children}
-            {actions && actions.map(actionProps => (
+            {actions?.map(actionProps => (
                 <ContextMenuItem
                     key = { actionProps.text }
                     { ...actionProps } />

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

@@ -11,69 +11,69 @@ type Props = {
     /**
      * List item actions.
      */
-    actions: ReactNode,
+    actions: ReactNode;
 
     /**
      * List item container class name.
      */
-    className?: string,
+    className?: string;
 
     /**
      * Whether or not the actions should be hidden.
      */
-    hideActions?: boolean,
+    hideActions?: boolean;
 
     /**
      * Icon to be displayed on the list item. (Avatar for participants).
      */
-    icon: ReactNode,
+    icon: ReactNode;
 
     /**
      * Id of the container.
      */
-    id?: string,
+    id?: string;
 
     /**
      * Indicators to be displayed on the list item.
      */
-    indicators?: ReactNode,
+    indicators?: ReactNode;
 
     /**
      * Whether or not the item is highlighted.
      */
-    isHighlighted?: boolean,
+    isHighlighted?: boolean;
 
     /**
      * Click handler.
      */
-    onClick?: (e?: React.MouseEvent) => void,
+    onClick?: (e?: React.MouseEvent) => void;
 
     /**
      * Long press handler.
      */
-    onLongPress?: (e?: EventTarget) => void,
+    onLongPress?: (e?: EventTarget) => void;
 
     /**
      * Mouse leave handler.
      */
-    onMouseLeave?: (e?: React.MouseEvent) => void,
+    onMouseLeave?: (e?: React.MouseEvent) => void;
 
     /**
      * Data test id.
      */
-    testId?: string,
+    testId?: string;
 
     /**
      * Text children to be displayed on the list item.
      */
-    textChildren: ReactNode | string,
+    textChildren: ReactNode | string;
 
     /**
      * The actions trigger. Can be Hover or Permanent.
      */
-    trigger: string
+    trigger: string;
 
-}
+};
 
 const useStyles = makeStyles((theme: any) => {
     return {

react/features/base/conference/reducer.ts

@@ -154,7 +154,7 @@ ReducerRegistry.register<IConferenceState>('features/base/conference',
  * reduction of the specified action.
  */
 function _authStatusChanged(state: IConferenceState,
-        { authEnabled, authLogin }: { authEnabled: boolean, authLogin: string }) {
+        { authEnabled, authLogin }: { authEnabled: boolean; authLogin: string; }) {
     return assign(state, {
         authEnabled,
         authLogin
@@ -171,7 +171,7 @@ function _authStatusChanged(state: IConferenceState,
  * @returns {Object} The new state of the feature base/conference after the
  * reduction of the specified action.
  */
-function _conferenceFailed(state: IConferenceState, { conference, error }: { conference: Object, error: Error }) {
+function _conferenceFailed(state: IConferenceState, { conference, error }: { conference: Object; error: Error; }) {
     // The current (similar to getCurrentConference in
     // base/conference/functions.any.js) conference which is joining or joined:
     const conference_ = state.conference || state.joining;
@@ -237,13 +237,13 @@ function _conferenceFailed(state: IConferenceState, { conference, error }: { con
  * @returns {Object} The new state of the feature base/conference after the
  * reduction of the specified action.
  */
-function _conferenceJoined(state: IConferenceState, { conference }: { conference: any }) {
+function _conferenceJoined(state: IConferenceState, { conference }: { conference: any; }) {
     // FIXME The indicator which determines whether a JitsiConference is locked
     // i.e. password-protected is private to lib-jitsi-meet. However, the
     // library does not fire LOCK_STATE_CHANGED upon joining a JitsiConference
     // with a password.
     // FIXME Technically JitsiConference.room is a private field.
-    const locked = conference.room && conference.room.locked ? LOCKED_REMOTELY : undefined;
+    const locked = conference.room?.locked ? LOCKED_REMOTELY : undefined;
 
     return assign(state, {
         authRequired: undefined,
@@ -284,7 +284,7 @@ function _conferenceJoined(state: IConferenceState, { conference }: { conference
  * reduction of the specified action.
  */
 function _conferenceLeftOrWillLeave(state: IConferenceState, { conference, type }:
-    { conference: Object, type: string }) {
+    { conference: Object; type: string; }) {
     const nextState = { ...state };
 
     // The redux action CONFERENCE_LEFT is the last time that we should be
@@ -338,7 +338,7 @@ function _conferenceLeftOrWillLeave(state: IConferenceState, { conference, type
  * @returns {Object} The new state of the feature base/conference after the
  * reduction of the specified action.
  */
-function _conferenceWillJoin(state: IConferenceState, { conference }: { conference: Object }) {
+function _conferenceWillJoin(state: IConferenceState, { conference }: { conference: Object; }) {
     return assign(state, {
         error: undefined,
         joining: conference
@@ -355,7 +355,7 @@ function _conferenceWillJoin(state: IConferenceState, { conference }: { conferen
  * @returns {Object} The new state of the feature base/conference after the
  * reduction of the specified action.
  */
-function _lockStateChanged(state: IConferenceState, { conference, locked }: { conference: Object, locked: boolean }) {
+function _lockStateChanged(state: IConferenceState, { conference, locked }: { conference: Object; locked: boolean; }) {
     if (state.conference !== conference) {
         return state;
     }
@@ -389,8 +389,8 @@ function _p2pStatusChanged(state: IConferenceState, action: any) {
  * @returns {Object} The new state of the feature base/conference after the
  * reduction of the specified action.
  */
-function _setPassword(state: IConferenceState, { conference, method, password }
-    : { conference: any, method: Object, password: string }) {
+function _setPassword(state: IConferenceState, { conference, method, password }: {
+    conference: any; method: Object; password: string; }) {
     switch (method) {
     case conference.join:
         return assign(state, {

react/features/base/config/configType.ts

@@ -107,7 +107,7 @@ export interface IConfig {
     apiLogLevels?: Array<'warn' | 'log' | 'error' | 'info' | 'debug'>;
     audioLevelsInterval?: number;
     audioQuality?: {
-        opusMaxAverageBitrate?: number|null;
+        opusMaxAverageBitrate?: number | null;
         stereo?: boolean;
     };
     autoCaptionOnRecord?: boolean;
@@ -120,7 +120,10 @@ export interface IConfig {
         hideAutoAssignButton?: boolean;
         hideJoinRoomButton?: boolean;
     };
-    buttonsWithNotifyClick?: Array<ButtonsWithNotifyClick | { key: ButtonsWithNotifyClick; preventExecution: boolean }>;
+    buttonsWithNotifyClick?: Array<ButtonsWithNotifyClick | {
+        key: ButtonsWithNotifyClick;
+        preventExecution: boolean;
+    }>;
     callStatsConfigParams?: {
         additionalIDs?: {
             customerID?: string;
@@ -144,7 +147,7 @@ export interface IConfig {
     callStatsSecret?: string;
     channelLastN?: number;
     chromeExtensionBanner?: {
-        chromeExtensionsInfo?: Array<{ id: string; path: string }>;
+        chromeExtensionsInfo?: Array<{ id: string; path: string; }>;
         edgeUrl?: string;
         url?: string;
     };
@@ -165,8 +168,8 @@ export interface IConfig {
                 ideal?: number;
                 max?: number;
                 min?: number;
-            }
-        }
+            };
+        };
     };
     corsAvatarURLs?: Array<string>;
     defaultLanguage?: string;
@@ -188,7 +191,7 @@ export interface IConfig {
     };
     dialInConfCodeUrl?: string;
     dialInNumbersUrl?: string;
-    disable1On1Mode?: boolean|null;
+    disable1On1Mode?: boolean | null;
     disableAddingBackgroundImages?: boolean;
     disableAudioLevels?: boolean;
     disableBeforeUnloadHandlers?: boolean;
@@ -333,7 +336,7 @@ export interface IConfig {
     };
     iAmRecorder?: boolean;
     iAmSipGateway?: boolean;
-    inviteAppName?: string|null;
+    inviteAppName?: string | null;
     lastNLimits?: {
         [key: number]: number;
     };
@@ -373,7 +376,7 @@ export interface IConfig {
         iceTransportPolicy?: string;
         preferH264?: boolean;
         preferredCodec?: string;
-        stunServers?: Array<{ urls: string }>;
+        stunServers?: Array<{ urls: string; }>;
     };
     participantsPane?: {
         hideModeratorSettingsTab?: boolean;
@@ -414,7 +417,7 @@ export interface IConfig {
         enabled?: boolean;
         mode?: 'always' | 'recording';
     };
-    speakerStatsOrder?: Array<'role'|'name'|'hasLeft'>;
+    speakerStatsOrder?: Array<'role' | 'name' | 'hasLeft'>;
     startAudioMuted?: boolean;
     startAudioOnly?: boolean;
     startLastN?: number;
@@ -466,7 +469,7 @@ export interface IConfig {
                 high?: number;
                 low?: number;
                 standard?: number;
-            }
+            };
         };
         minHeightForQualityLvl: {
             [key: number]: string;

react/features/base/config/reducer.ts

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

react/features/base/connection/reducer.ts

@@ -72,7 +72,7 @@ ReducerRegistry.register<IConnectionState>(
  */
 function _connectionDisconnected(
         state: IConnectionState,
-        { connection }: { connection: Object }) {
+        { connection }: { connection: Object; }) {
     const connection_ = _getCurrentConnection(state);
 
     if (connection_ !== connection) {
@@ -99,8 +99,8 @@ function _connectionDisconnected(
 function _connectionEstablished(
         state: IConnectionState,
         { connection, timeEstablished }: {
-            connection: any,
-            timeEstablished: number
+            connection: any;
+            timeEstablished: number;
         }) {
     return assign(state, {
         connecting: undefined,
@@ -124,8 +124,8 @@ function _connectionEstablished(
 function _connectionFailed(
         state: IConnectionState,
         { connection, error }: {
-            connection: Object,
-            error: ConnectionFailedError
+            connection: Object;
+            error: ConnectionFailedError;
         }) {
     const connection_ = _getCurrentConnection(state);
 
@@ -155,7 +155,7 @@ function _connectionFailed(
  */
 function _connectionWillConnect(
         state: IConnectionState,
-        { connection }: { connection: Object }) {
+        { connection }: { connection: Object; }) {
     return assign(state, {
         connecting: connection,
 
@@ -178,7 +178,7 @@ function _connectionWillConnect(
  * @returns {JitsiConnection} - The current {@code JitsiConnection} if any.
  * @private
  */
-function _getCurrentConnection(baseConnectionState: IConnectionState): IConnectionState|undefined {
+function _getCurrentConnection(baseConnectionState: IConnectionState): IConnectionState | undefined {
     return baseConnectionState.connection || baseConnectionState.connecting;
 }
 
@@ -194,7 +194,7 @@ function _getCurrentConnection(baseConnectionState: IConnectionState): IConnecti
  */
 function _setLocationURL(
         state: IConnectionState,
-        { locationURL }: { locationURL?: URL }) {
+        { locationURL }: { locationURL?: URL; }) {
     return set(state, 'locationURL', locationURL);
 }
 
@@ -226,6 +226,6 @@ function _setRoom(state: IConnectionState) {
  */
 function _setShowConnectionInfo(
         state: IConnectionState,
-        { showConnectionInfo }: { showConnectionInfo: boolean }) {
+        { showConnectionInfo }: { showConnectionInfo: boolean; }) {
     return set(state, 'showConnectionInfo', showConnectionInfo);
 }

react/features/base/devices/reducer.ts

@@ -37,7 +37,7 @@ export interface IDevicesState {
     permissions: {
         audio: boolean;
         video: boolean;
-    }
+    };
 }
 
 /**

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

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

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

@@ -19,7 +19,7 @@ import { withPixelLineHeight } from '../../../styles/functions.web';
 import Button from '../../../ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../ui/constants';
 
-const TitleIcon = ({ appearance }: { appearance?: 'danger' | 'warning' }) => {
+const TitleIcon = ({ appearance }: { appearance?: 'danger' | 'warning'; }) => {
     if (!appearance) {
         return null;
     }
@@ -34,15 +34,15 @@ const TitleIcon = ({ appearance }: { appearance?: 'danger' | 'warning' }) => {
 };
 
 interface Props extends WithTranslation {
-    appearance?: 'danger' | 'warning',
-    classes: any,
-    heading: string,
-    hideCloseIconButton: boolean,
-    id?: string,
-    isHeadingMultiline: boolean,
-    onClose: (e?: any) => void,
-    showKeyline: boolean,
-    testId?: string
+    appearance?: 'danger' | 'warning';
+    classes: any;
+    heading: string;
+    hideCloseIconButton: boolean;
+    id?: string;
+    isHeadingMultiline: boolean;
+    onClose: (e?: any) => void;
+    showKeyline: boolean;
+    testId?: string;
 }
 
 /**

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

@@ -35,61 +35,61 @@ interface Props extends DialogProps, WithTranslation {
     /**
      * An object containing the CSS classes.
      */
-    classes: any,
+    classes: any;
 
     /**
      * Custom dialog header that replaces the standard heading.
      */
-    customHeader?: ReactElement<any> | Function,
+    customHeader?: ReactElement<any> | Function;
 
     /**
      * Disables dismissing the dialog when the blanket is clicked. Enabled
      * by default.
      */
-    disableBlanketClickDismiss: boolean,
+    disableBlanketClickDismiss: boolean;
 
     /*
      * True if listening for the Enter key should be disabled.
      */
-    disableEnter: boolean,
+    disableEnter: boolean;
 
     /**
      * If true, no footer will be displayed.
      */
-    disableFooter?: boolean,
+    disableFooter?: boolean;
 
     /**
      * If true, the cancel button will not display but cancel actions, like
      * clicking the blanket, will cancel.
      */
-    hideCancelButton: boolean,
+    hideCancelButton: boolean;
 
     /**
      * If true, the close icon button will not be displayed.
      */
-    hideCloseIconButton: boolean,
+    hideCloseIconButton: boolean;
 
     /**
      * Whether the dialog is modal. This means clicking on the blanket will
      * leave the dialog open. No cancel button.
      */
-    isModal: boolean,
+    isModal: boolean;
 
     /**
      * The handler for the event when clicking the 'confirmNo' button.
      * Defaults to onCancel if absent.
      */
-    onDecline?: () => void,
+    onDecline?: () => void;
 
     /**
      * Callback invoked when setting the ref of the Dialog.
      */
-    onDialogRef?: Function,
+    onDialogRef?: Function;
 
     /**
      * Disables rendering of the submit button.
      */
-    submitDisabled: boolean,
+    submitDisabled: boolean;
 
     /**
      * Width of the dialog, can be:
@@ -98,7 +98,7 @@ interface Props extends DialogProps, WithTranslation {
      * - integer value for pixel width
      * - string value for percentage.
      */
-    width: string
+    width: string;
 }
 
 /**
@@ -246,7 +246,7 @@ class StatelessDialog extends Component<Props> {
         if (!this.props.isModal) {
             const { onCancel } = this.props;
 
-            onCancel && onCancel();
+            onCancel?.();
         }
     }
 
@@ -271,7 +271,7 @@ class StatelessDialog extends Component<Props> {
     _onSubmit(value?: any) {
         const { onSubmit } = this.props;
 
-        onSubmit && onSubmit(value);
+        onSubmit?.(value);
     }
 
     /**
@@ -342,7 +342,7 @@ class StatelessDialog extends Component<Props> {
      * @returns {void}
      */
     _onDialogRef(element?: any) {
-        this.props.onDialogRef && this.props.onDialogRef(element && element.parentNode);
+        this.props.onDialogRef?.(element?.parentNode);
     }
 
     /**

react/features/base/dialog/constants.ts

@@ -5,56 +5,56 @@ export type DialogProps = {
     /**
      * Whether cancel button is disabled. Enabled by default.
      */
-    cancelDisabled?: boolean,
+    cancelDisabled?: boolean;
 
     /**
      * Optional i18n key to change the cancel button title.
      */
-    cancelKey?: string,
+    cancelKey?: string;
 
     /**
      * The React {@code Component} children which represents the dialog's body.
      */
-    children?: ReactNode,
+    children?: ReactNode;
 
     /**
      * Is ok button enabled/disabled. Enabled by default.
      */
-    okDisabled?: boolean,
+    okDisabled?: boolean;
 
     /**
      * Optional i18n key to change the ok button title.
      */
-    okKey?: string,
+    okKey?: string;
 
     /**
      * The handler for onCancel event.
      */
-    onCancel: Function,
+    onCancel: Function;
 
     /**
      * The handler for the event when submitting the dialog.
      */
-    onSubmit: Function,
+    onSubmit: Function;
 
     /**
      * Additional style to be applied on the dialog.
      *
      * NOTE: Not all dialog types support this!
      */
-    style?: Object,
+    style?: Object;
 
     /**
      * Key to use for showing a title.
      */
-    titleKey?: string,
+    titleKey?: string;
 
     /**
      * The string to use as a title instead of {@code titleKey}. If a truthy
      * value is specified, it takes precedence over {@code titleKey} i.e.
      * The latter is unused.
      */
-    titleString?: string
+    titleString?: string;
 };
 
 /**

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

@@ -11,98 +11,98 @@ type Props = {
     /**
      * The id of the element this button icon controls.
      */
-    ariaControls?: string,
+    ariaControls?: string;
 
     /**
      * Id of description label.
      */
-    ariaDescribedBy?: string,
+    ariaDescribedBy?: string;
 
     /**
      * Aria disabled flag for the Icon.
      */
-    ariaDisabled?: boolean,
+    ariaDisabled?: boolean;
 
     /**
      * Whether the element popup is expanded.
      */
-    ariaExpanded?: boolean,
+    ariaExpanded?: boolean;
 
     /**
      * Whether the element has a popup.
      */
-    ariaHasPopup?: boolean,
+    ariaHasPopup?: boolean;
 
     /**
      * Aria label for the Icon.
      */
-    ariaLabel?: string,
+    ariaLabel?: string;
 
     /**
      * Whether the element has a pressed.
      */
-    ariaPressed?: boolean,
+    ariaPressed?: boolean;
 
     /**
      * Class name for the web platform, if any.
      */
-    className?: string,
+    className?: string;
 
     /**
      * Color of the icon (if not provided by the style object).
      */
-    color?: string,
+    color?: string;
 
     /**
      * Id of the icon container.
      */
-    containerId?: string,
+    containerId?: string;
 
     /**
      * Id prop (mainly for autotests).
      */
-    id?: string,
+    id?: string;
 
     /**
      * Function to invoke on click.
      */
-    onClick?: Function,
+    onClick?: Function;
 
     /**
      * Keydown handler.
      */
-    onKeyDown?: Function,
+    onKeyDown?: Function;
 
     /**
      * Keypress handler.
      */
-    onKeyPress?: Function,
+    onKeyPress?: Function;
 
     /**
      * Role for the Icon.
      */
-    role?: string,
+    role?: string;
 
     /**
      * The size of the icon (if not provided by the style object).
      */
-    size?: number | string,
+    size?: number | string;
 
     /**
      * The preloaded icon component to render.
      */
-    src: Function,
+    src: Function;
 
     /**
      * Style object to be applied.
      */
-    style?: Object,
+    style?: Object;
 
     /**
      * TabIndex  for the Icon.
      */
-    tabIndex?: number
-}
+    tabIndex?: number;
+};
 
 export const DEFAULT_COLOR = navigator.product === 'ReactNative' ? 'white' : undefined;
 export const DEFAULT_SIZE = navigator.product === 'ReactNative' ? 36 : 22;

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

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

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

@@ -14,33 +14,33 @@ type Props = AbstractProps & {
     /**
      * Own CSS class name.
      */
-    className?: string,
+    className?: string;
 
     /**
      * An object containing the CSS classes.
      */
-    classes: any,
+    classes: any;
 
     /**
      * The color of the label.
      */
-    color?: string,
+    color?: string;
 
 
     /**
      * Color for the icon.
      */
-    iconColor?: string,
+    iconColor?: string;
 
     /**
      * HTML ID attribute to add to the root of {@code Label}.
      */
-    id?: string,
+    id?: string;
 
     /**
      * Click handler if any.
      */
-    onClick?: (e?: React.MouseEvent) => void,
+    onClick?: (e?: React.MouseEvent) => void;
 
 };
 

react/features/base/lastn/reducer.ts

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

react/features/base/logging/JitsiMeetInMemoryLogStorage.ts

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

react/features/base/logging/JitsiMeetLogStorage.ts

@@ -90,7 +90,7 @@ export default class JitsiMeetLogStorage {
      * representing log lines or aggregated lines objects.
      * @returns {void}
      */
-    storeLogs(logEntries: Array<string|any>) {
+    storeLogs(logEntries: Array<string | any>) {
 
         if (this.canStoreLogsCallstats()) {
             this.storeLogsCallstats(logEntries);
@@ -107,7 +107,7 @@ export default class JitsiMeetLogStorage {
      * @param {Array<string|any>} logEntries - The log entries to send to the rtcstats server.
      * @returns {void}
      */
-    storeLogsCallstats(logEntries: Array<string|any>) {
+    storeLogsCallstats(logEntries: Array<string | any>) {
         const conference = getCurrentConference(this.getState());
 
         if (!conference || !conference.isCallstatsEnabled()) {

react/features/base/logging/reducer.ts

@@ -60,7 +60,7 @@ export interface ILoggingState {
         disableLogCollector?: boolean;
         loggers: {
             [key: string]: LogLevel;
-        }
+        };
     };
     logCollector?: {
         flush: () => void;

react/features/base/media/constants.ts

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

react/features/base/media/reducer.ts

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

react/features/base/participants/actions.ts

@@ -559,7 +559,7 @@ export function participantKicked(kicker: any, kicked: any) {
             kicker: kicker?.getId()
         });
 
-        if (kicked.isReplaced && kicked.isReplaced()) {
+        if (kicked.isReplaced?.()) {
             return;
         }
 
@@ -587,7 +587,7 @@ export function participantKicked(kicker: any, kicked: any) {
  *     }
  * }}
  */
-export function pinParticipant(id: string|null) {
+export function pinParticipant(id: string | null) {
     return {
         type: PIN_PARTICIPANT,
         participant: {

react/features/base/participants/functions.ts

@@ -32,16 +32,16 @@ const AVATAR_CHECKED_URLS = new Map();
 /* eslint-disable arrow-body-style, no-unused-vars */
 const AVATAR_CHECKER_FUNCTIONS = [
     (participant: Participant) => {
-        return participant && participant.isJigasi ? JIGASI_PARTICIPANT_ICON : null;
+        return participant?.isJigasi ? JIGASI_PARTICIPANT_ICON : null;
     },
     (participant: Participant) => {
-        return participant && participant.avatarURL ? participant.avatarURL : null;
+        return participant?.avatarURL ? participant.avatarURL : null;
     },
     (participant: Participant, store: IStore) => {
         const config = store.getState()['features/base/config'];
         const isGravatarDisabled = config.gravatar?.disabled;
 
-        if (participant && participant.email && !isGravatarDisabled) {
+        if (participant?.email && !isGravatarDisabled) {
             const gravatarBaseURL = config.gravatar?.baseUrl
                 || config.gravatarBaseURL
                 || GRAVATAR_BASE_URL;
@@ -224,7 +224,7 @@ export function getNormalizedDisplayName(name: string) {
  * @private
  * @returns {(Participant|undefined)}
  */
-export function getParticipantById(stateful: IStateful, id: string): Participant|undefined {
+export function getParticipantById(stateful: IStateful, id: string): Participant | undefined {
     const state = toState(stateful)['features/base/participants'];
     const { local, localScreenShare, remote } = state;
 

react/features/base/participants/reducer.ts

@@ -196,7 +196,7 @@ ReducerRegistry.register<IParticipantsState>('features/base/participants',
             id = LOCAL_PARTICIPANT_DEFAULT_ID;
         }
 
-        let newParticipant: Participant|null = null;
+        let newParticipant: Participant | null = null;
 
         if (state.remote.has(id)) {
             newParticipant = _participant(state.remote.get(id), action);
@@ -466,7 +466,7 @@ function _isEveryoneModerator(state: IParticipantsState) {
  * @private
  * @returns {Participant}
  */
-function _participant(state: Participant|LocalParticipant = { id: '' }, action: any): Participant|LocalParticipant {
+function _participant(state: Participant | LocalParticipant = { id: '' }, action: any): Participant | LocalParticipant {
     switch (action.type) {
     case SET_LOADABLE_AVATAR_URL:
     case PARTICIPANT_UPDATED: {
@@ -502,7 +502,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: Participant; }) {
     const {
         avatarURL,
         botType,

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

@@ -11,78 +11,78 @@ type Props = {
     /**
      * Icon to display in the options section.
      */
-    OptionsIcon?: Function,
+    OptionsIcon?: Function;
 
     /**
      * The Label of the child element.
      */
-    ariaDropDownLabel?: string,
+    ariaDropDownLabel?: string;
 
     /**
      * The Label of the current element.
      */
-    ariaLabel?: string,
+    ariaLabel?: string;
 
     /**
      * To give a aria-pressed to the icon.
      */
-    ariaPressed?: boolean,
+    ariaPressed?: boolean;
 
     /**
      * Text of the button.
      */
-    children: ReactNode,
+    children: ReactNode;
 
     /**
      * Text css class of the button.
      */
-    className?: string,
+    className?: string;
 
     /**
      * An object containing the CSS classes.
      */
-    classes: any,
+    classes: any;
 
     /**
      * If the button is disabled or not.
      */
-    disabled?: boolean,
+    disabled?: boolean;
 
     /**
      * If the button has options.
      */
-    hasOptions?: boolean,
+    hasOptions?: boolean;
 
 
     /**
      * OnClick button handler.
      */
-    onClick?: (e?: React.MouseEvent) => void,
+    onClick?: (e?: React.MouseEvent) => void;
 
     /**
      * Click handler for options.
      */
-    onOptionsClick?: (e?: React.KeyboardEvent | React.MouseEvent) => void,
+    onOptionsClick?: (e?: React.KeyboardEvent | React.MouseEvent) => void;
 
     /**
      * To give a role to the icon.
      */
-    role?: string,
+    role?: string;
 
     /**
      * To navigate with the keyboard.
      */
-    tabIndex?: number,
+    tabIndex?: number;
 
     /**
      * TestId of the button. Can be used to locate element when testing UI.
      */
-    testId?: string,
+    testId?: string;
 
     /**
      * The type of th button: primary, secondary, text.
      */
-    type: string
+    type: string;
 };
 
 /**

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

@@ -18,12 +18,12 @@ interface Props extends WithTranslation {
     /**
      * List of strings with details about the connection.
      */
-    connectionDetails: string[],
+    connectionDetails: string[];
 
     /**
      * The type of the connection. Can be: 'none', 'poor', 'nonOptimal' or 'good'.
      */
-    connectionType: string
+    connectionType: string;
 }
 
 const useStyles = makeStyles((theme: any) => {
@@ -124,7 +124,7 @@ const CONNECTION_TYPE_MAP: {
         connectionClass: string;
         connectionText: string;
         icon: Function;
-    }
+    };
 } = {
     [CONNECTION_TYPE.POOR]: {
         connectionClass: 'con-status--poor',

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

@@ -16,49 +16,49 @@ interface Props extends WithTranslation {
     /**
      * Additional CSS class name.
      */
-    className?: string,
+    className?: string;
 
     /**
      * The icon component to use.
      */
-    icon: Function,
+    icon: Function;
 
     /**
      * The CSS classnames to set on the icon element of the component.
     */
-    iconClassName?: string,
+    iconClassName?: string;
 
     /**
      * The color of the icon.
      */
-    iconColor?: string,
+    iconColor?: string;
 
     /**
      * Id of the icon to be rendered.
      */
-    iconId?: string,
+    iconId?: string;
 
     /**
      * The font size for the icon.
      */
-    iconSize: string,
+    iconSize: string;
 
     /**
      * The ID attribute to set on the root element of the component.
      */
-    id?: string,
+    id?: string;
 
     /**
      * The translation key to use for displaying a tooltip when hovering over
      * the component.
      */
-    tooltipKey: string,
+    tooltipKey: string;
 
     /**
      * From which side of the indicator the tooltip should appear from,
      * defaulting to "top".
      */
-    tooltipPosition: string
+    tooltipPosition: string;
 }
 
 const useStyles = makeStyles(() => {

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

@@ -7,27 +7,27 @@ type Props = {
     /**
      * CSS class name.
      */
-    className: string,
+    className: string;
 
     /**
      * Indicates whether the switch is disabled or not.
      */
-    disabled: boolean,
+    disabled: boolean;
 
     /**
      * ID of the toggle.
      */
-    id: string,
+    id: string;
 
     /**
      * Handler called when the user presses the switch.
      */
-    onValueChange: (checked?: boolean) => void,
+    onValueChange: (checked?: boolean) => void;
 
     /**
      * The current value.
      */
-    value: boolean
+    value: boolean;
 };
 
 /**

react/features/base/react/types.ts

@@ -3,9 +3,9 @@ export interface IconButtonProps {
     color?: string;
     disabled?: boolean;
     onPress?: Function;
-    size?: number|string;
+    size?: number | string;
     src: Function;
-    style?: Object|undefined;
+    style?: Object | undefined;
     tapColor?: string;
     type?: string;
 }

react/features/base/redux/PersistenceRegistry.ts

@@ -19,7 +19,7 @@ declare type ElementConfig = boolean | Object;
 /**
  * The type of the name-config pairs stored in {@code PersistenceRegistry}.
  */
-declare type PersistencyConfigMap = { [name: string]: ElementConfig };
+declare type PersistencyConfigMap = { [name: string]: ElementConfig; };
 
 /**
  * A registry to allow features to register their redux store subtree to be
@@ -27,7 +27,7 @@ declare type PersistencyConfigMap = { [name: string]: ElementConfig };
  */
 class PersistenceRegistry {
     _checksum = '';
-    _defaultStates: { [name: string ]: Object|undefined } = {};
+    _defaultStates: { [name: string ]: Object | undefined; } = {};
     _elements: PersistencyConfigMap = {};
 
     /**

react/features/base/redux/ReducerRegistry.ts

@@ -5,7 +5,7 @@ import type { Reducer } from 'redux';
  * The type of the dictionary/map which associates a reducer (function) with the
  * name of he Redux state property managed by the reducer.
  */
-type NameReducerMap<S> = { [name: string]: Reducer<S, Action<any>> };
+type NameReducerMap<S> = { [name: string]: Reducer<S, Action<any>>; };
 
 /**
  * A registry for Redux reducers, allowing features to register themselves

react/features/base/redux/StateListenerRegistry.ts

@@ -45,8 +45,8 @@ type RegistrationOptions = {
      * @property {boolean} [deepEquals=false] - Whether or not a deep equals check should be performed on the selection
      * returned by {@link Selector}.
      */
-    deepEquals?: boolean
-}
+    deepEquals?: boolean;
+};
 
 /**
  * A type of a {@link Selector}-{@link Listener} association in which the
@@ -59,18 +59,18 @@ type SelectorListener = {
      * The {@code Listener} which listens to changes in the values selected by
      * {@link selector}.
      */
-    listener: Listener,
+    listener: Listener;
 
     /**
      * The {@link RegistrationOptions} passed during the registration to be applied on the listener.
      */
-    options?: RegistrationOptions,
+    options?: RegistrationOptions;
 
     /**
      * The {@code Selector} which selects values whose changes are listened to
      * by {@link listener}.
      */
-    selector: Selector
+    selector: Selector;
 };
 
 /**
@@ -94,8 +94,8 @@ class StateListenerRegistry {
      * @returns {void}
      */
     _listener({ prevSelections, store }: {
-            prevSelections: Map<SelectorListener, any>,
-            store: Store<any, any>
+            prevSelections: Map<SelectorListener, any>;
+            store: Store<any, any>;
     }) {
         for (const selectorListener of this._selectorListeners) {
             const prevSelection = prevSelections.get(selectorListener);

react/features/base/redux/functions.ts

@@ -35,7 +35,7 @@ export function assign<T extends Object>(target: T, source: Partial<T>): T {
  * @returns {Connector}
  */
 export function connect(
-        mapStateToProps?: any, mapDispatchToProps?: Function|Object) {
+        mapStateToProps?: any, mapDispatchToProps?: Function | Object) {
     return reduxConnect(mapStateToProps, mapDispatchToProps);
 }
 

react/features/base/responsive-ui/reducer.ts

@@ -37,7 +37,7 @@ export interface IResponsiveUIState {
         left: number;
         right: number;
         top: number;
-    }
+    };
 }
 
 ReducerRegistry.register<IResponsiveUIState>('features/base/responsive-ui',

react/features/base/settings/reducer.ts

@@ -51,19 +51,19 @@ const DEFAULT_STATE: ISettingsState = {
 };
 
 export interface ISettingsState {
-    audioOutputDeviceId?: string|boolean;
-    avatarURL?: string|boolean;
-    cameraDeviceId?: string|boolean;
+    audioOutputDeviceId?: string | boolean;
+    avatarURL?: string | boolean;
+    cameraDeviceId?: string | boolean;
     disableCallIntegration?: boolean;
     disableCrashReporting?: boolean;
     disableP2P?: boolean;
     disableSelfView?: boolean;
-    displayName?: string|boolean;
-    email?: string|boolean;
+    displayName?: string | boolean;
+    email?: string | boolean;
     hideShareAudioHelper?: boolean;
     localFlipX?: boolean;
-    micDeviceId?: string|boolean;
-    serverURL?: string|boolean;
+    micDeviceId?: string | boolean;
+    serverURL?: string | boolean;
     soundsIncomingMessage?: boolean;
     soundsParticipantJoined?: boolean;
     soundsParticipantKnocking?: boolean;
@@ -73,15 +73,15 @@ export interface ISettingsState {
     startAudioOnly?: boolean;
     startWithAudioMuted?: boolean;
     startWithVideoMuted?: boolean;
-    userSelectedAudioOutputDeviceId?: string|boolean;
-    userSelectedAudioOutputDeviceLabel?: string|boolean;
-    userSelectedCameraDeviceId?: string|boolean;
-    userSelectedCameraDeviceLabel?: string|boolean;
-    userSelectedMicDeviceId?: string|boolean;
-    userSelectedMicDeviceLabel?: string|boolean;
+    userSelectedAudioOutputDeviceId?: string | boolean;
+    userSelectedAudioOutputDeviceLabel?: string | boolean;
+    userSelectedCameraDeviceId?: string | boolean;
+    userSelectedCameraDeviceLabel?: string | boolean;
+    userSelectedMicDeviceId?: string | boolean;
+    userSelectedMicDeviceLabel?: string | boolean;
     userSelectedNotifications?: {
         [key: string]: boolean;
-    }|boolean,
+    } | boolean;
     userSelectedSkipPrejoin?: boolean;
     visible?: boolean;
 }

react/features/base/sounds/reducer.ts

@@ -23,20 +23,20 @@ export type Sound = {
      * Becomes available once the sound resource gets loaded and the sound can
      * not be played until that happens.
      */
-    audioElement?: AudioElement,
+    audioElement?: AudioElement;
 
     /**
      * This field is container for all optional parameters related to the sound.
      */
-    options?: Object,
+    options?: Object;
 
     /**
      * This field describes the source of the audio resource to be played. It
      * can be either a path to the file or an object depending on the platform
      * (native vs web).
      */
-    src?: Object | string
-}
+    src?: Object | string;
+};
 
 /**
  * Initial/default state of the feature {@code base/sounds}. It is a {@code Map}

react/features/base/tracks/reducer.ts

@@ -25,7 +25,7 @@ interface ITrack {
     participantId: string;
     streamingStatus?: string;
     videoStarted: boolean;
-    videoType?: string|null;
+    videoType?: string | null;
 }
 
 /**
@@ -173,7 +173,7 @@ ReducerRegistry.register<ITracksState>('features/base/tracks', (state = [], acti
 });
 
 export interface INoSrcDataState {
-    noSrcDataNotificationUid?: string|number;
+    noSrcDataNotificationUid?: string | number;
 }
 
 /**

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

@@ -11,13 +11,13 @@ type Props = {
     /**
      * The default theme or theme set through advanced branding.
      */
-    _theme: Object,
+    _theme: Object;
 
     /**
     * The children of the component.
     */
-    children: React.ReactNode
-}
+    children: React.ReactNode;
+};
 
 /**
  * The theme provider for the web app.

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

@@ -14,12 +14,12 @@ interface IButtonProps extends ButtonProps {
     /**
      * Class name used for additional styles.
      */
-    className?: string,
+    className?: string;
 
     /**
      * Whether or not the button should be full width.
      */
-    fullWidth?: boolean,
+    fullWidth?: boolean;
 
     /**
      * The id of the button.

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

@@ -154,7 +154,7 @@ const Input = React.forwardRef<any, IInputProps>(({
     const styles = useStyles();
     const isMobile = isMobileBrowser();
 
-    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement|HTMLTextAreaElement>) =>
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
         onChange(e.target.value), []);
 
     const clearInput = useCallback(() => onChange(''), []);

react/features/base/ui/constants.ts

@@ -14,7 +14,7 @@ export enum BUTTON_TYPES {
  * The modes of the buttons.
  */
 export const BUTTON_MODES: {
-    CONTAINED: 'contained'
+    CONTAINED: 'contained';
 } = {
     CONTAINED: 'contained'
 };

react/features/base/ui/types.ts

@@ -7,9 +7,9 @@ interface TypographyType {
 
 export interface Theme {
     breakpoints: {
-        down: (value: number|string) => string;
-        up: (value: number|string) => string;
-    },
+        down: (value: number | string) => string;
+        up: (value: number | string) => string;
+    };
     palette: {
         action01: string;
         action01Active: string;

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

@@ -9,7 +9,7 @@ import { USER_INTERACTION_RECEIVED } from './actionTypes';
  *
  * @type {Function|null}
  */
-let userInteractionListener: Function|null = null;
+let userInteractionListener: Function | null = null;
 
 /**
  * Implements the entry point of the middleware of the feature base/user-interaction.
@@ -56,7 +56,7 @@ function _onUserInteractionReceived(dispatch: Function, event: any) {
  * @private
  * @returns {void}
  */
-function _startListeningForUserInteraction({ dispatch }: { dispatch: Function }) {
+function _startListeningForUserInteraction({ dispatch }: { dispatch: Function; }) {
     _stopListeningForUserInteraction();
 
     userInteractionListener = _onUserInteractionReceived.bind(null, dispatch);

react/features/base/util/helpers.ts

@@ -85,7 +85,7 @@ export function getBaseUrl(w: Window = window) {
     const doc = w.document;
     const base = doc.querySelector('base');
 
-    if (base && base.href) {
+    if (base?.href) {
         return base.href;
     }
 
@@ -127,7 +127,7 @@ export function getJitsiMeetGlobalNS() {
  */
 export function reportError(e: Error, msg = '') {
     console.error(msg, e);
-    window.onerror && window.onerror(msg, undefined, undefined, undefined, e);
+    window.onerror?.(msg, undefined, undefined, undefined, e);
 }
 
 /**

react/features/base/util/parseURLParams.ts

@@ -31,7 +31,7 @@ export function parseURLParams(
     }
     const paramStr = source === 'search' ? url.search : url.hash;
     const params: any = {};
-    const paramParts = (paramStr && paramStr.substr(1).split('&')) || [];
+    const paramParts = paramStr?.substr(1).split('&') || [];
 
     // Detect and ignore hash params for hash routers.
     if (source === 'hash' && paramParts.length === 1) {

react/features/base/util/uri.ts

@@ -107,7 +107,7 @@ function _fixURIStringScheme(uri: string) {
  * @param {string?} path - The path to convert.
  * @returns {string?}
  */
-export function getBackendSafePath(path?: string): string|undefined {
+export function getBackendSafePath(path?: string): string | undefined {
     if (!path) {
         return path;
     }
@@ -124,7 +124,7 @@ export function getBackendSafePath(path?: string): string|undefined {
  * @param {string?} room - The room name to convert.
  * @returns {string?}
  */
-export function getBackendSafeRoomName(room?: string): string|undefined {
+export function getBackendSafeRoomName(room?: string): string | undefined {
     if (!room) {
         return room;
     }
@@ -168,7 +168,7 @@ export function getBackendSafeRoomName(room?: string): string|undefined {
  * @returns {string} - The (Web application) context root defined by the
  * specified {@code location} (URI).
  */
-export function getLocationContextRoot({ pathname }: { pathname: string }) {
+export function getLocationContextRoot({ pathname }: { pathname: string; }) {
     const contextRootEndIndex = pathname.lastIndexOf('/');
 
     return (
@@ -221,7 +221,7 @@ function _objectToURLParamsArray(obj = {}) {
 export function parseStandardURIString(str: string) {
     /* eslint-disable no-param-reassign */
 
-    const obj: { [key: string]: any } = {
+    const obj: { [key: string]: any; } = {
         toString: _standardURIToString
     };
 
@@ -277,7 +277,7 @@ export function parseStandardURIString(str: string) {
     regex = new RegExp(`^${_URI_PATH_PATTERN}`, 'gi');
     match = regex.exec(str);
 
-    let pathname: string|undefined;
+    let pathname: string | undefined;
 
     if (match) {
         pathname = match[1];
@@ -375,7 +375,7 @@ export function parseURIString(uri?: string) {
  */
 function _standardURIToString(thiz?: Object) {
     // @ts-ignore
-    // eslint-disable-next-line no-invalid-this
+    // eslint-disable-next-line @typescript-eslint/no-invalid-this
     const { hash, host, pathname, protocol, search } = thiz || this;
     let str = '';
 
@@ -421,7 +421,7 @@ export function safeDecodeURIComponent(text: string) {
  * @returns {string} - A {@code String} representation of the specified
  * {@code obj} which is supposed to represent a URL.
  */
-export function toURLString(obj?: (Object | string)): string|undefined|null {
+export function toURLString(obj?: (Object | string)): string | undefined | null {
     let str;
 
     switch (typeof obj) {
@@ -452,7 +452,7 @@ export function toURLString(obj?: (Object | string)): string|undefined|null {
  * @returns {string} - A {@code String} representation of the specified
  * {@code Object}.
  */
-export function urlObjectToString(o: { [key: string]: any }): string|undefined {
+export function urlObjectToString(o: { [key: string]: any; }): string | undefined {
     // First normalize the given url. It come as o.url or split into o.serverURL
     // and o.room.
     let tmp;
@@ -469,7 +469,7 @@ export function urlObjectToString(o: { [key: string]: any }): string|undefined {
 
     // protocol
     if (!url.protocol) {
-        let protocol: string|undefined = o.protocol || o.scheme;
+        let protocol: string | undefined = o.protocol || o.scheme;
 
         if (protocol) {
             // Protocol is supposed to be the scheme and the final ':'. Anyway,
@@ -487,7 +487,7 @@ export function urlObjectToString(o: { [key: string]: any }): string|undefined {
         //
         // It may be host/hostname and pathname with the latter denoting the
         // tenant.
-        const domain: string|undefined = o.domain || o.host || o.hostname;
+        const domain: string | undefined = o.domain || o.host || o.hostname;
 
         if (domain) {
             const { host, hostname, pathname: contextRoot, port }

react/features/breakout-rooms/reducer.ts

@@ -25,9 +25,9 @@ export interface IBreakoutRoomsState {
                     displayName: string;
                     jid: string;
                     role: string;
-                }
-            }
-        }
+                };
+            };
+        };
     };
 }
 

react/features/chat/components/AbstractMessageContainer.ts

@@ -7,7 +7,7 @@ export interface Props {
     /**
      * The messages array to render.
      */
-    messages: IMessage[]
+    messages: IMessage[];
 }
 
 /**

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

@@ -24,17 +24,17 @@ interface Props extends WithTranslation {
     /**
      * Whether chat emoticons are disabled.
      */
-    _areSmileysDisabled: boolean,
+    _areSmileysDisabled: boolean;
 
     /**
      * Invoked to send chat messages.
      */
-    dispatch: Dispatch<any>,
+    dispatch: Dispatch<any>;
 
     /**
      * Callback to invoke on message send.
      */
-    onSend: Function
+    onSend: Function;
 }
 
 /**
@@ -45,12 +45,12 @@ type State = {
     /**
      * User provided nickname when the input text is provided in the view.
      */
-    message: string,
+    message: string;
 
     /**
      * Whether or not the smiley selector is visible.
      */
-    showSmileysPanel: boolean
+    showSmileysPanel: boolean;
 };
 
 /**

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

@@ -21,12 +21,12 @@ interface Props extends WithTranslation {
     /**
      * Invoked to set the local participant display name.
      */
-    dispatch: Dispatch<any>,
+    dispatch: Dispatch<any>;
 
     /**
      * Whether the polls feature is enabled or not.
      */
-    isPollsEnabled: boolean
+    isPollsEnabled: boolean;
 }
 
 /**
@@ -37,7 +37,7 @@ type State = {
     /**
      * User provided display name when the input text is provided in the view.
      */
-    displayName: string
+    displayName: string;
 };
 
 /**

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

@@ -6,8 +6,8 @@ type Props = {
     /**
      * URL of the GIF.
      */
-    url: string
-}
+    url: string;
+};
 
 const useStyles = makeStyles(() => {
     return {

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

@@ -86,7 +86,7 @@ export default class MessageContainer extends AbstractMessageContainer<Props, St
     render() {
         const groupedMessages = this._getMessagesGroupedBySender();
         const messages = groupedMessages.map((group, index) => {
-            const messageType = group[0] && group[0].messageType;
+            const messageType = group[0]?.messageType;
 
             return (
                 <ChatMessageGroup

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

@@ -9,17 +9,17 @@ type Props = {
     /**
      * The component(s) that need to be scrollable on mobile.
      */
-    children: ReactElement,
+    children: ReactElement;
 
     /**
      * Whether the component should be flex container or not.
      */
-    flex?: boolean,
+    flex?: boolean;
 
     /**
      * Whether the component is rendered within a modal.
      */
-    isModal: boolean,
+    isModal: boolean;
 
 };
 
@@ -62,12 +62,12 @@ function TouchmoveHack({ children, isModal, flex }: Props) {
     }
 
     useEffect(() => {
-        if (touchMoveElementRef && touchMoveElementRef.current) {
+        if (touchMoveElementRef?.current) {
             touchMoveElementRef.current.addEventListener('touchmove', handleTouchMove, true);
         }
 
         return () => {
-            if (touchMoveElementRef && touchMoveElementRef.current) {
+            if (touchMoveElementRef?.current) {
                 touchMoveElementRef.current.removeEventListener('touchmove', handleTouchMove, true);
             }
         };

react/features/chat/reducer.ts

@@ -49,7 +49,7 @@ export interface IChatState {
     lobbyMessageRecipient?: {
         id: string;
         name: string;
-    } | LocalParticipant,
+    } | LocalParticipant;
     messages: IMessage[];
     nbUnreadMessages: number;
     privateMessageRecipient?: Participant;

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

@@ -11,7 +11,7 @@ import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
  * @returns {JSX.Element} - The Audio icon.
  *
  */
-const AudioIcon = () : JSX.Element => (<Icon
+const AudioIcon = (): JSX.Element => (<Icon
     color = { BaseTheme.palette.text06 }
     size = { 20 }
     src = { IconVolumeEmpty } />);

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

@@ -18,7 +18,7 @@ import styles from './styles';
  *
  * @returns {JSX.Element} - The end meeting button.
  */
-const EndMeetingButton = () : JSX.Element => {
+const EndMeetingButton = (): JSX.Element => {
     const dispatch = useDispatch();
 
     const onSelect = useCallback(() => {

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

@@ -9,7 +9,7 @@ import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
  *
  * @returns {JSX.Element} - The end meeting icon.
  */
-const EndMeetingIcon = () : JSX.Element => (<Icon
+const EndMeetingIcon = (): JSX.Element => (<Icon
     color = { BaseTheme.palette.icon01 }
     size = { 20 }
     src = { IconHangup } />);

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

@@ -32,7 +32,7 @@ const LONG_PRESS = 'long.press';
  *
  * @returns {JSX.Element} - The audio mute round button.
  */
-const MicrophoneButton = () : JSX.Element|null => {
+const MicrophoneButton = (): JSX.Element | null => {
     const dispatch = useDispatch();
     const audioMuted = useSelector((state: IState) => isLocalTrackMuted(state['features/base/tracks'],
         MEDIA_TYPE.AUDIO));

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

@@ -18,7 +18,7 @@ import styles from './styles';
  *
  * @returns {JSX.Element} - The sound device button.
  */
-const SelectSoundDevice = () : JSX.Element => {
+const SelectSoundDevice = (): JSX.Element => {
     const dispatch = useDispatch();
 
     const onSelect = useCallback(() =>

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

@@ -28,12 +28,12 @@ type Props = {
     /**
      * Name of the meeting we're currently in.
      */
-    _meetingName: string,
+    _meetingName: string;
 
     /**
      * Whether displaying the current meeting name is enabled or not.
      */
-    _meetingNameEnabled: boolean,
+    _meetingNameEnabled: boolean;
 
 };
 
@@ -44,7 +44,7 @@ type Props = {
  * @param {Props} props - The React props passed to this component.
  * @returns {JSX.Element}
  */
-const TitleBar = (props: Props) : JSX.Element => {
+const TitleBar = (props: Props): JSX.Element => {
     const localParticipant = useSelector(getLocalParticipant);
     const localParticipantId = localParticipant?.id;
 

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

@@ -82,67 +82,67 @@ type Props = AbstractProps & WithTranslation & {
     /**
      * Disable/enable inactive indicator.
      */
-    _connectionIndicatorInactiveDisabled: boolean,
+    _connectionIndicatorInactiveDisabled: boolean;
 
     /**
      * The current condition of the user's connection, matching one of the
      * enumerated values in the library.
      */
-    _connectionStatus: string,
+    _connectionStatus: string;
 
     /**
      * Whether the indicator popover is disabled.
      */
-    _popoverDisabled: boolean,
+    _popoverDisabled: boolean;
 
     /**
      * The source name of the track.
      */
-    _sourceName: string,
+    _sourceName: string;
 
     /**
      * Whether source name signaling is enabled.
      */
-    _sourceNameSignalingEnabled: boolean,
+    _sourceNameSignalingEnabled: boolean;
 
     /**
      * Whether or not the component should ignore setting a visibility class for
      * hiding the component when the connection quality is not strong.
      */
-    alwaysVisible: boolean,
+    alwaysVisible: boolean;
 
     /**
      * The audio SSRC of this client.
      */
-    audioSsrc: number,
+    audioSsrc: number;
 
 
     /**
      * An object containing the CSS classes.
      */
-    classes: Object,
+    classes: Object;
 
     /**
      * The Redux dispatch function.
      */
-    dispatch: Dispatch<any>,
+    dispatch: Dispatch<any>;
 
     /**
      * Whether or not clicking the indicator should display a popover for more
      * details.
      */
-    enableStatsDisplay: boolean,
+    enableStatsDisplay: boolean;
 
     /**
      * The font-size for the icon.
      */
-    iconSize: number,
+    iconSize: number;
 
     /**
      * Relative to the icon from where the popover for more connection details
      * should display.
      */
-    statsPopoverPosition: string
+    statsPopoverPosition: string;
 };
 
 type State = AbstractState & {
@@ -150,8 +150,8 @@ type State = AbstractState & {
     /**
      * Whether popover is ivisible or not.
      */
-    popoverVisible: boolean
-}
+    popoverVisible: boolean;
+};
 
 const styles = (theme: any) => {
     return {

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

@@ -10,7 +10,7 @@ import { translate } from '../../base/i18n/functions';
 type DownloadUpload = {
     download: number;
     upload: number;
-}
+};
 
 /**
  * The type of the React {@code Component} props of
@@ -21,7 +21,7 @@ interface Props extends WithTranslation {
     /**
      * The audio SSRC of this client.
      */
-    audioSsrc: number,
+    audioSsrc: number;
 
     /**
      * Statistics related to bandwidth.
@@ -30,7 +30,7 @@ interface Props extends WithTranslation {
      *     upload: Number
      * }}.
      */
-    bandwidth: DownloadUpload,
+    bandwidth: DownloadUpload;
 
     /**
      * Statistics related to bitrate.
@@ -39,18 +39,18 @@ interface Props extends WithTranslation {
      *     upload: Number
      * }}.
      */
-    bitrate: DownloadUpload,
+    bitrate: DownloadUpload;
 
     /**
      * The number of bridges (aka media servers) currently used in the
      * conference.
      */
-    bridgeCount: number,
+    bridgeCount: number;
 
     /**
      * An object containing the CSS classes.
      */
-    classes: any,
+    classes: any;
 
     /**
      * Audio/video codecs in use for the connection.
@@ -59,28 +59,28 @@ interface Props extends WithTranslation {
         [key: string]: {
             audio: string;
             video: string;
-        }
-    },
+        };
+    };
 
     /**
      * A message describing the connection quality.
      */
-    connectionSummary: string,
+    connectionSummary: string;
 
     /**
      * Whether or not should display the "Show More" link.
      */
-    disableShowMoreStats: boolean,
+    disableShowMoreStats: boolean;
 
     /**
      * The end-to-end round-trip-time.
      */
-    e2eRtt: number,
+    e2eRtt: number;
 
     /**
      * Whether or not should display the "Save Logs" link.
      */
-    enableSaveLogs: boolean,
+    enableSaveLogs: boolean;
 
     /**
      * Statistics related to frame rates for each ssrc.
@@ -88,33 +88,33 @@ interface Props extends WithTranslation {
      *     [ ssrc ]: Number
      * }}.
      */
-    framerate: Object,
+    framerate: Object;
 
     /**
      * Whether or not the statistics are for local video.
      */
-    isLocalVideo: boolean,
+    isLocalVideo: boolean;
 
     /**
      * Whether or not the statistics are for screen share.
      */
-    isVirtualScreenshareParticipant: boolean,
+    isVirtualScreenshareParticipant: boolean;
 
     /**
      * The send-side max enabled resolution (aka the highest layer that is not
      * suspended on the send-side).
      */
-    maxEnabledResolution: number,
+    maxEnabledResolution: number;
 
     /**
      * Callback to invoke when the user clicks on the download logs link.
      */
-    onSaveLogs: () => void,
+    onSaveLogs: () => void;
 
     /**
      * Callback to invoke when the show additional stats link is clicked.
      */
-    onShowMore: (e?: React.MouseEvent) => void,
+    onShowMore: (e?: React.MouseEvent) => void;
 
     /**
      * Statistics related to packet loss.
@@ -123,17 +123,17 @@ interface Props extends WithTranslation {
      *     upload: Number
      * }}.
      */
-    packetLoss: DownloadUpload,
+    packetLoss: DownloadUpload;
 
     /**
      * The endpoint id of this client.
      */
-    participantId: string,
+    participantId: string;
 
     /**
      * The region that we think the client is in.
      */
-    region: string,
+    region: string;
 
     /**
      * Statistics related to display resolutions for each ssrc.
@@ -148,24 +148,24 @@ interface Props extends WithTranslation {
         [ssrc: string]: {
             height: number;
             width: number;
-        }
-    },
+        };
+    };
 
     /**
      * The region of the media server that we are connected to.
      */
-    serverRegion: string,
+    serverRegion: string;
 
     /**
      * Whether or not additional stats about bandwidth and transport should be
      * displayed. Will not display even if true for remote participants.
      */
-    shouldShowMore: boolean,
+    shouldShowMore: boolean;
 
     /**
      * Whether source name signaling is enabled.
      */
-    sourceNameSignalingEnabled: boolean,
+    sourceNameSignalingEnabled: boolean;
 
     /**
      * Statistics related to transports.
@@ -178,12 +178,12 @@ interface Props extends WithTranslation {
         remoteCandidateType: string;
         transportType: string;
         type: string;
-    }>,
+    }>;
 
     /**
      * The video SSRC of this client.
      */
-    videoSsrc: number
+    videoSsrc: number;
 }
 
 /**
@@ -809,11 +809,11 @@ class ConnectionStatsTable extends Component<Props> {
         }
 
         const data: {
-            localIP: string[],
-            localPort: string[],
-            remoteIP: string[],
-            remotePort: string[],
-            transportType: string[]
+            localIP: string[];
+            localPort: string[];
+            remoteIP: string[];
+            remotePort: string[];
+            transportType: string[];
         } = {
             localIP: [],
             localPort: [],

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

@@ -14,12 +14,12 @@ export interface Props extends WithTranslation {
     /**
      * Invoked to update the local participant's display name.
      */
-    dispatch: Dispatch<any>,
+    dispatch: Dispatch<any>;
 
     /**
      * Function to be invoked after a successful display name change.
      */
-    onPostSubmit?: Function
+    onPostSubmit?: Function;
 }
 
 /**
@@ -61,7 +61,7 @@ export default class AbstractDisplayNamePrompt<S>
             displayName
         }));
 
-        onPostSubmit && onPostSubmit();
+        onPostSubmit?.();
 
         return true;
     }

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

@@ -32,7 +32,7 @@ type Props = {
      * The ID of the participant to render the label for.
      */
     participantId: string;
-}
+};
 
 /**
  * Renders a label with the display name of the on-stage participant.

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

@@ -28,48 +28,48 @@ interface Props extends WithTranslation {
      * The participant's current display name which should be shown when in
      * edit mode. Can be different from what is shown when not editing.
      */
-    _configuredDisplayName: string,
+    _configuredDisplayName: string;
 
     /**
      * The participant's current display name which should be shown.
      */
-    _nameToDisplay: string,
+    _nameToDisplay: string;
 
     /**
      * Whether or not the display name should be editable on click.
      */
-    allowEditing: boolean,
+    allowEditing: boolean;
 
     /**
      * An object containing the CSS classes.
      */
-    classes: any,
+    classes: any;
 
     /**
      * Invoked to update the participant's display name.
      */
-    dispatch: Dispatch<any>,
+    dispatch: Dispatch<any>;
 
     /**
      * A string to append to the displayName, if provided.
      */
-    displayNameSuffix: string,
+    displayNameSuffix: string;
 
     /**
      * The ID attribute to add to the component. Useful for global querying for
      * the component by legacy components and torture tests.
      */
-    elementID: string,
+    elementID: string;
 
     /**
      * The ID of the participant whose name is being displayed.
      */
-    participantID: string,
+    participantID: string;
 
     /**
      * The type of thumbnail.
      */
-    thumbnailType: string
+    thumbnailType: string;
 }
 
 /**
@@ -80,12 +80,12 @@ type State = {
     /**
      * The current value of the display name in the edit field.
      */
-    editDisplayNameValue: string,
+    editDisplayNameValue: string;
 
     /**
      * Whether or not the component should be displaying an editable input.
      */
-    isEditing: boolean
+    isEditing: boolean;
 };
 
 const styles = (theme: any) => {
@@ -333,7 +333,7 @@ function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
     const participant = getParticipantById(state, participantID ?? '');
 
     return {
-        _configuredDisplayName: participant && participant.name,
+        _configuredDisplayName: participant?.name,
         _nameToDisplay: getParticipantDisplayName(state, participantID ?? '')
     };
 }

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

@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) => {
  * @param {Props} props - The props of the component.
  * @returns {ReactElement}
  */
-const DisplayNameBadge: React.FC<{ name: string }> = ({ name }) => {
+const DisplayNameBadge: React.FC<{ name: string; }> = ({ name }) => {
     const classes = useStyles();
 
     return (

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

@@ -15,7 +15,7 @@ type State = {
     /**
      * The name to show in the display name text field.
      */
-    displayName: string
+    displayName: string;
 };
 
 /**

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

@@ -47,7 +47,7 @@ export function createMuiBrandingTheme(customTheme: any) {
 
     let newSpacing = [ ...spacing ];
 
-    if (customSpacing && customSpacing.length) {
+    if (customSpacing?.length) {
         newSpacing = customSpacing;
     }
 

react/features/dynamic-branding/reducer.ts

@@ -151,7 +151,7 @@ export interface IDynamicBrandingState {
     defaultBranding: boolean;
     didPageUrl: string;
     inviteDomain: string;
-    labels: Object|null;
+    labels: Object | null;
     logoClickUrl: string;
     logoImageUrl: string;
     muiBrandedTheme?: boolean;
@@ -228,7 +228,7 @@ ReducerRegistry.register<IDynamicBrandingState>(STORE_NAME, (state = DEFAULT_STA
  * @private
  * @returns {{Props}}
  */
-function formatImages(images: Array<string> | Array<{ src: string; tooltip?: string }>): Array<Image> {
+function formatImages(images: Array<string> | Array<{ src: string; tooltip?: string; }>): Array<Image> {
     return images.map((img, i) => {
         let src;
         let tooltip;

react/features/e2ee/components/E2EESection.tsx

@@ -20,32 +20,32 @@ interface Props extends WithTranslation {
     /**
      * The resource for the description, computed based on the maxMode and whether the switch is toggled or not.
      */
-    _descriptionResource: string,
+    _descriptionResource: string;
 
     /**
      * Custom e2ee labels.
      */
-    _e2eeLabels: any,
+    _e2eeLabels: any;
 
     /**
      * Whether the switch is currently enabled or not.
      */
-    _enabled: boolean,
+    _enabled: boolean;
 
     /**
      * Indicates whether all participants in the conference currently support E2EE.
      */
-    _everyoneSupportE2EE: boolean,
+    _everyoneSupportE2EE: boolean;
 
     /**
      * Whether E2EE is currently enabled or not.
      */
-    _toggled: boolean,
+    _toggled: boolean;
 
     /**
      * The redux {@code dispatch} function.
      */
-    dispatch: Dispatch<any>
+    dispatch: Dispatch<any>;
 }
 
 type State = {
@@ -53,7 +53,7 @@ type State = {
     /**
      * True if the switch is toggled on.
      */
-    toggled: boolean
+    toggled: boolean;
 };
 
 /**
@@ -161,7 +161,7 @@ function mapStateToProps(state: IState) {
     const { enabled: e2eeEnabled, maxMode } = state['features/e2ee'];
     const { e2eeLabels } = state['features/base/config'];
 
-    let descriptionResource: string|undefined = '';
+    let descriptionResource: string | undefined = '';
 
     if (e2eeLabels) {
         // When e2eeLabels are present, the descriptionResouse is ignored.

react/features/face-landmarks/FaceLandmarksHelper.ts

@@ -4,35 +4,35 @@ import { Human, Config, FaceResult } from '@vladmandic/human';
 import { DETECTION_TYPES, FACE_DETECTION_SCORE_THRESHOLD, FACE_EXPRESSIONS_NAMING_MAPPING } from './constants';
 
 type DetectInput = {
-    image: ImageBitmap | ImageData,
-    threshold: number
+    image: ImageBitmap | ImageData;
+    threshold: number;
 };
 
 type FaceBox = {
-    left: number,
-    right: number,
-    width?: number
+    left: number;
+    right: number;
+    width?: number;
 };
 
 type InitInput = {
-    baseUrl: string,
-    detectionTypes: string[]
-}
+    baseUrl: string;
+    detectionTypes: string[];
+};
 
 type DetectOutput = {
-    faceBox?: FaceBox,
-    faceCount: number,
-    faceExpression?: string
+    faceBox?: FaceBox;
+    faceCount: number;
+    faceExpression?: string;
 };
 
 export interface FaceLandmarksHelper {
-    detect({ image, threshold } : DetectInput): Promise<DetectOutput>;
-    getDetectionInProgress(): boolean;
-    getDetections(image: ImageBitmap | ImageData): Promise<Array<FaceResult>>;
-    getFaceBox(detections: Array<FaceResult>, threshold: number): FaceBox | undefined;
-    getFaceCount(detections : Array<FaceResult>): number;
-    getFaceExpression(detections: Array<FaceResult>): string | undefined;
-    init(): Promise<void>;
+    detect: ({ image, threshold }: DetectInput) => Promise<DetectOutput>;
+    getDetectionInProgress: () => boolean;
+    getDetections: (image: ImageBitmap | ImageData) => Promise<Array<FaceResult>>;
+    getFaceBox: (detections: Array<FaceResult>, threshold: number) => FaceBox | undefined;
+    getFaceCount: (detections: Array<FaceResult>) => number;
+    getFaceExpression: (detections: Array<FaceResult>) => string | undefined;
+    init: () => Promise<void>;
 }
 
 /**
@@ -217,7 +217,7 @@ export class HumanHelper implements FaceLandmarksHelper {
      * @param {DetectInput} input - The input for the detections.
      * @returns {Promise<DetectOutput>}
      */
-    public async detect({ image, threshold } : DetectInput): Promise<DetectOutput> {
+    public async detect({ image, threshold }: DetectInput): Promise<DetectOutput> {
         let faceExpression;
         let faceBox;
 

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

@@ -71,172 +71,172 @@ interface Props extends WithTranslation {
     /**
      * Additional CSS class names top add to the root.
      */
-    _className: string,
+    _className: string;
 
     /**
      * The number of columns in tile view.
      */
-    _columns: number,
+    _columns: number;
 
     /**
      * The current layout of the filmstrip.
      */
-    _currentLayout: string,
+    _currentLayout: string;
 
     /**
      * Whether or not to hide the self view.
      */
-    _disableSelfView: boolean,
+    _disableSelfView: boolean;
 
     /**
      * The height of the filmstrip.
      */
-    _filmstripHeight: number,
+    _filmstripHeight: number;
 
     /**
      * The width of the filmstrip.
      */
-    _filmstripWidth: number,
+    _filmstripWidth: number;
 
     /**
      * Whether or not we have scroll on the filmstrip.
      */
-    _hasScroll: boolean,
+    _hasScroll: boolean;
 
     /**
      * Whether this is a recorder or not.
      */
-    _iAmRecorder: boolean,
+    _iAmRecorder: boolean;
 
     /**
      * Whether the filmstrip button is enabled.
      */
-    _isFilmstripButtonEnabled: boolean,
+    _isFilmstripButtonEnabled: boolean;
 
     /**
     * Whether or not the toolbox is displayed.
     */
-    _isToolboxVisible: Boolean,
+    _isToolboxVisible: Boolean;
 
     /**
      * Whether or not the current layout is vertical filmstrip.
      */
-    _isVerticalFilmstrip: boolean,
+    _isVerticalFilmstrip: boolean;
 
     /**
      * The local screen share participant. This prop is behind the sourceNameSignaling feature flag.
      */
-    _localScreenShare: Participant,
+    _localScreenShare: Participant;
 
     /**
      * Whether or not the filmstrip videos should currently be displayed.
      */
-    _mainFilmstripVisible: boolean,
+    _mainFilmstripVisible: boolean;
 
     /**
      * The maximum width of the vertical filmstrip.
      */
-    _maxFilmstripWidth: number,
+    _maxFilmstripWidth: number;
 
     /**
      * The maximum height of the top panel.
      */
-    _maxTopPanelHeight: number,
+    _maxTopPanelHeight: number;
 
     /**
      * The participants in the call.
      */
-    _remoteParticipants: Array<Object>,
+    _remoteParticipants: Array<Object>;
 
     /**
      * The length of the remote participants array.
      */
-    _remoteParticipantsLength: number,
+    _remoteParticipantsLength: number;
 
     /**
      * Whether or not the filmstrip should be user-resizable.
      */
-    _resizableFilmstrip: boolean,
+    _resizableFilmstrip: boolean;
 
     /**
      * The number of rows in tile view.
      */
-    _rows: number,
+    _rows: number;
 
     /**
      * The height of the thumbnail.
      */
-    _thumbnailHeight: number,
+    _thumbnailHeight: number;
 
     /**
      * The width of the thumbnail.
      */
-    _thumbnailWidth: number,
+    _thumbnailWidth: number;
 
     /**
      * Flag that indicates whether the thumbnails will be reordered.
      */
-    _thumbnailsReordered: Boolean,
+    _thumbnailsReordered: Boolean;
 
     /**
      * Whether or not the filmstrip is top panel.
      */
-    _topPanelFilmstrip: boolean,
+    _topPanelFilmstrip: boolean;
 
     /**
      * The height of the top panel (user resized).
      */
-    _topPanelHeight?: number,
+    _topPanelHeight?: number;
 
     /**
      * The max height of the top panel.
      */
-    _topPanelMaxHeight: number,
+    _topPanelMaxHeight: number;
 
     /**
      * Whether or not the top panel is visible.
      */
-    _topPanelVisible: boolean,
+    _topPanelVisible: boolean;
 
     /**
      * The width of the vertical filmstrip (user resized).
      */
-    _verticalFilmstripWidth?: number,
+    _verticalFilmstripWidth?: number;
 
     /**
      * Whether or not the vertical filmstrip should have a background color.
      */
-    _verticalViewBackground: boolean,
+    _verticalViewBackground: boolean;
 
     /**
      * Whether or not the vertical filmstrip should be displayed as grid.
      */
-    _verticalViewGrid: boolean,
+    _verticalViewGrid: boolean;
 
     /**
      * The max width of the vertical filmstrip.
      */
-    _verticalViewMaxWidth: number,
+    _verticalViewMaxWidth: number;
 
     /**
      * Additional CSS class names to add to the container of all the thumbnails.
      */
-    _videosClassName: string,
+    _videosClassName: string;
 
     /**
      * An object containing the CSS classes.
      */
-    classes: any,
+    classes: any;
 
     /**
      * The redux {@code dispatch} function.
      */
-    dispatch: Dispatch<any>,
+    dispatch: Dispatch<any>;
 
     /**
      * The type of filmstrip to be displayed.
      */
-    filmstripType: string
+    filmstripType: string;
 }
 
 type State = {
@@ -244,23 +244,23 @@ type State = {
     /**
      * Initial top panel height on drag handle mouse down.
      */
-    dragFilmstripHeight?: number,
+    dragFilmstripHeight?: number;
 
     /**
      * Initial filmstrip width on drag handle mouse down.
      */
-    dragFilmstripWidth?: number|null,
+    dragFilmstripWidth?: number | null;
 
     /**
      * Whether or not the mouse is pressed.
      */
-    isMouseDown: boolean,
+    isMouseDown: boolean;
 
     /**
      * Initial mouse position on drag handle mouse down.
      */
-    mousePosition?: number|null
-}
+    mousePosition?: number | null;
+};
 
 /**
  * Implements a React {@link Component} which represents the filmstrip on
@@ -607,7 +607,7 @@ class Filmstrip extends PureComponent <Props, State> {
      * @param {Object} data - An object with the indexes identifying the ThumbnailWrapper instance.
      * @returns {string} - The key.
      */
-    _gridItemKey({ columnIndex, rowIndex }: { columnIndex: number, rowIndex: number }) {
+    _gridItemKey({ columnIndex, rowIndex }: { columnIndex: number; rowIndex: number; }) {
         const {
             _disableSelfView,
             _columns,
@@ -639,8 +639,8 @@ class Filmstrip extends PureComponent <Props, State> {
      * @param {Object} data - Information about the rendered items.
      * @returns {void}
      */
-    _onListItemsRendered({ visibleStartIndex, visibleStopIndex }
-        : { visibleStartIndex: number, visibleStopIndex: number }) {
+    _onListItemsRendered({ visibleStartIndex, visibleStopIndex }: {
+        visibleStartIndex: number; visibleStopIndex: number; }) {
         const { dispatch } = this.props;
         const { startIndex, stopIndex } = this._calculateIndices(visibleStartIndex, visibleStopIndex);
 
@@ -659,10 +659,10 @@ class Filmstrip extends PureComponent <Props, State> {
         visibleRowStartIndex,
         visibleRowStopIndex
     }: {
-        visibleColumnStartIndex: number,
-        visibleColumnStopIndex: number,
-        visibleRowStartIndex: number,
-        visibleRowStopIndex: number
+        visibleColumnStartIndex: number;
+        visibleColumnStopIndex: number;
+        visibleRowStartIndex: number;
+        visibleRowStopIndex: number;
     }) {
         const { _columns, dispatch } = this.props;
         const start = (visibleRowStartIndex * _columns) + visibleColumnStartIndex;

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

@@ -18,18 +18,18 @@ type Props = {
     /**
      * The font-size for the icon.
      */
-    iconSize: number,
+    iconSize: number;
 
     /**
      * The participant id who we want to render the raised hand indicator
      * for.
      */
-    participantId: string,
+    participantId: string;
 
     /**
      * From which side of the indicator the tooltip should appear from.
      */
-    tooltipPosition: string
+    tooltipPosition: string;
 };
 
 const useStyles = makeStyles(() => {
@@ -57,7 +57,7 @@ const PinnedIndicator = ({
 }: Props) => {
     const stageFilmstrip = useSelector(isStageFilmstripAvailable);
     const pinned = useSelector((state: IState) => getParticipantById(state, participantId))?.pinned;
-    const activePinnedParticipants: Array<{ participantId: string; pinned: boolean }>
+    const activePinnedParticipants: Array<{ participantId: string; pinned: boolean; }>
         = useSelector(getPinnedActiveParticipants);
     const isPinned = activePinnedParticipants.find(p => p.participantId === participantId);
     const styles = useStyles();

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

@@ -17,18 +17,18 @@ type Props = {
     /**
      * The font-size for the icon.
      */
-    iconSize: number,
+    iconSize: number;
 
     /**
      * The participant id who we want to render the raised hand indicator
      * for.
      */
-    participantId: string,
+    participantId: string;
 
     /**
      * From which side of the indicator the tooltip should appear from.
      */
-    tooltipPosition: string
+    tooltipPosition: string;
 };
 
 const useStyles = makeStyles((theme: any) => {
@@ -54,7 +54,7 @@ const RaisedHandIndicator = ({
     participantId,
     tooltipPosition
 }: Props) => {
-    const participant: Participant|undefined = useSelector((state: IState) =>
+    const participant: Participant | undefined = useSelector((state: IState) =>
         getParticipantById(state, participantId));
     const _raisedHand = hasRaisedHand(participant);
     const styles = useStyles();

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

@@ -84,22 +84,22 @@ export type State = {
     /**
      * Indicates that the canplay event has been received.
      */
-    canPlayEventReceived: boolean,
+    canPlayEventReceived: boolean;
 
     /**
      * The current display mode of the thumbnail.
      */
-    displayMode: number,
+    displayMode: number;
 
     /**
      * Indicates whether the thumbnail is hovered or not.
      */
-    isHovered: boolean,
+    isHovered: boolean;
 
     /**
      * Whether popover is visible or not.
      */
-    popoverVisible: boolean
+    popoverVisible: boolean;
 };
 
 /**
@@ -110,172 +110,172 @@ export type Props = {
     /**
      * The audio track related to the participant.
      */
-    _audioTrack?: Object,
+    _audioTrack?: Object;
 
     /**
      * Indicates whether the local video flip feature is disabled or not.
      */
-    _disableLocalVideoFlip: boolean,
+    _disableLocalVideoFlip: boolean;
 
     /**
      * Indicates whether enlargement of tiles to fill the available space is disabled.
      */
-    _disableTileEnlargement: boolean,
+    _disableTileEnlargement: boolean;
 
     /**
      * URL of GIF sent by this participant, null if there's none.
      */
-    _gifSrc?: string,
+    _gifSrc?: string;
 
     /**
      * The height of the Thumbnail.
      */
-    _height: number,
+    _height: number;
 
     /**
      * Whether or not the participant is displayed on the stage filmstrip.
      * Used to hide the video from the vertical filmstrip.
      */
-    _isActiveParticipant: boolean,
+    _isActiveParticipant: boolean;
 
     /**
      * Indicates whether audio only mode is enabled.
      */
-    _isAudioOnly: boolean,
+    _isAudioOnly: boolean;
 
     /**
      * Indicates whether the participant associated with the thumbnail is displayed on the large video.
      */
-    _isCurrentlyOnLargeVideo: boolean,
+    _isCurrentlyOnLargeVideo: boolean;
 
     /**
      * Disable/enable the dominant speaker indicator.
      */
-    _isDominantSpeakerDisabled: boolean,
+    _isDominantSpeakerDisabled: boolean;
 
     /**
      * Indicates whether the thumbnail should be hidden or not.
      */
-    _isHidden: boolean,
+    _isHidden: boolean;
 
     /**
      * Whether we are currently running in a mobile browser.
      */
-    _isMobile: boolean,
+    _isMobile: boolean;
 
     /**
      * Whether we are currently running in a mobile browser in portrait orientation.
      */
-    _isMobilePortrait: boolean,
+    _isMobilePortrait: boolean;
 
     /**
      * Indicates whether the participant is screen sharing.
      */
-    _isScreenSharing: boolean,
+    _isScreenSharing: boolean;
 
     /**
      * Indicates whether testing mode is enabled.
      */
-    _isTestModeEnabled: boolean,
+    _isTestModeEnabled: boolean;
 
     /**
      * Indicates whether the video associated with the thumbnail is playable.
      */
-    _isVideoPlayable: boolean,
+    _isVideoPlayable: boolean;
 
     /**
      * Indicates whether the participant is a virtual screen share participant. This prop is behind the
      * sourceNameSignaling feature flag.
      */
-    _isVirtualScreenshareParticipant: boolean,
+    _isVirtualScreenshareParticipant: boolean;
 
     /**
      * The current local video flip setting.
      */
-    _localFlipX: boolean,
+    _localFlipX: boolean;
 
     /**
      * An object with information about the participant related to the thumbnail.
      */
-    _participant: Participant,
+    _participant: Participant;
 
     /**
      * Whether or not the participant has the hand raised.
      */
-    _raisedHand: boolean,
+    _raisedHand: boolean;
 
     /**
      * Whether source name signaling is enabled.
      */
-    _sourceNameSignalingEnabled: boolean,
+    _sourceNameSignalingEnabled: boolean;
 
     /**
      * Whether or not the current layout is stage filmstrip layout.
      */
-    _stageFilmstripLayout: boolean,
+    _stageFilmstripLayout: boolean;
 
     /**
      * Whether or not the participants are displayed on stage.
      * (and not screensharing or shared video; used to determine
      * whether or not the display the participant video in the vertical filmstrip).
      */
-    _stageParticipantsVisible: boolean,
+    _stageParticipantsVisible: boolean;
 
     /**
      * The type of thumbnail to display.
      */
-    _thumbnailType: string,
+    _thumbnailType: string;
 
     /**
      * The video object position for the participant.
      */
-    _videoObjectPosition: string,
+    _videoObjectPosition: string;
 
     /**
      * The video track that will be displayed in the thumbnail.
      */
-    _videoTrack?: any,
+    _videoTrack?: any;
 
     /**
      * The width of the thumbnail.
      */
-    _width: number,
+    _width: number;
 
     /**
      * An object containing CSS classes.
      */
-    classes: any,
+    classes: any;
 
     /**
      * The redux dispatch function.
      */
-    dispatch: Function,
+    dispatch: Function;
 
     /**
      * The type of filmstrip the tile is displayed in.
      */
-    filmstripType: string,
+    filmstripType: string;
 
     /**
      * The horizontal offset in px for the thumbnail. Used to center the thumbnails from the last row in tile view.
      */
-    horizontalOffset: number,
+    horizontalOffset: number;
 
     /**
      * The ID of the participant related to the thumbnail.
      */
-    participantID?: string,
+    participantID?: string;
 
     /**
      * Styles that will be set to the Thumbnail's main span element.
      */
-    style?: any,
+    style?: any;
 
     /**
      * The width of the thumbnail. Used for expanding the width of the thumbnails on last row in case
      * there is empty space.
      */
-    width?: number
+    width?: number;
 };
 
 const defaultStyles = (theme: any) => {
@@ -658,12 +658,12 @@ class Thumbnail extends Component<Props, State> {
         const isTileType = _thumbnailType === THUMBNAIL_TYPE.TILE;
         const jitsiVideoTrack = _videoTrack?.jitsiTrack;
         const track = jitsiVideoTrack?.track;
-        const isPortraitVideo = ((track && track.getSettings()?.aspectRatio) || 1) < 1;
+        const isPortraitVideo = (track?.getSettings()?.aspectRatio || 1) < 1;
 
         let styles: {
-            avatar: Object,
-            thumbnail: any,
-            video: Object
+            avatar: Object;
+            thumbnail: any;
+            video: Object;
         } = {
             thumbnail: {},
             avatar: {},
@@ -993,7 +993,7 @@ class Thumbnail extends Component<Props, State> {
         const videoTrackClassName
             = !_disableLocalVideoFlip && _videoTrack && !_isScreenSharing && _localFlipX ? 'flipVideoX' : '';
         const jitsiVideoTrack = _videoTrack?.jitsiTrack;
-        const videoTrackId = jitsiVideoTrack && jitsiVideoTrack.getId();
+        const videoTrackId = jitsiVideoTrack?.getId();
         const videoEventListeners: any = {};
 
         if (local) {

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

@@ -23,33 +23,33 @@ type Props = {
     /**
      * Class name for indicators container.
      */
-    className: string,
+    className: string;
 
     /**
      * Whether it is a virtual screenshare participant thumbnail.
      */
-    isVirtualScreenshareParticipant: boolean,
+    isVirtualScreenshareParticipant: boolean;
 
     /**
      * Whether or not the indicators are for the local participant.
      */
-    local: boolean,
+    local: boolean;
 
     /**
      * Id of the participant for which the component is displayed.
      */
-    participantId: string,
+    participantId: string;
 
     /**
      * Whether or not to show the status indicators.
      */
-    showStatusIndicators?: boolean,
+    showStatusIndicators?: boolean;
 
     /**
      * The type of thumbnail.
      */
-    thumbnailType: string
-}
+    thumbnailType: string;
+};
 
 const useStyles = makeStyles(() => {
     return {

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

@@ -29,48 +29,48 @@ type Props = {
     /**
      * Hide popover callback.
      */
-    hidePopover: Function,
+    hidePopover: Function;
 
     /**
      * Class name for the status indicators container.
      */
-    indicatorsClassName: string,
+    indicatorsClassName: string;
 
     /**
      * Whether or not the thumbnail is hovered.
      */
-    isHovered: boolean,
+    isHovered: boolean;
 
     /**
      * Whether or not the thumbnail is a virtual screen share participant.
      */
-    isVirtualScreenshareParticipant?: boolean,
+    isVirtualScreenshareParticipant?: boolean;
 
     /**
      * Whether or not the indicators are for the local participant.
      */
-    local: boolean,
+    local: boolean;
 
     /**
      * Id of the participant for which the component is displayed.
      */
-    participantId: string,
+    participantId: string;
 
     /**
      * Whether popover is visible or not.
      */
-    popoverVisible: boolean,
+    popoverVisible: boolean;
 
     /**
      * Show popover callback.
      */
-    showPopover: Function,
+    showPopover: Function;
 
     /**
      * The type of thumbnail.
      */
-    thumbnailType: string
-}
+    thumbnailType: string;
+};
 
 const useStyles = makeStyles(() => {
     return {

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

@@ -8,38 +8,38 @@ type Props = {
     /**
      * Hide popover callback.
      */
-    hidePopover: Function,
+    hidePopover: Function;
 
     /**
      * Whether or not the button is for the local participant.
      */
-    local: boolean,
+    local: boolean;
 
     /**
      * The id of the participant for which the button is.
      */
-    participantId?: string,
+    participantId?: string;
 
     /**
      * Whether popover is visible or not.
      */
-    popoverVisible: boolean,
+    popoverVisible: boolean;
 
     /**
      * Show popover callback.
      */
-    showPopover: Function,
+    showPopover: Function;
 
     /**
      * The type of thumbnail.
      */
-    thumbnailType: string,
+    thumbnailType: string;
 
     /**
      * Whether or not the component is visible.
      */
-    visible: boolean
-}
+    visible: boolean;
+};
 
 // eslint-disable-next-line no-confusing-arrow
 const VideoMenuTriggerButton = ({

react/features/filmstrip/reducer.ts

@@ -198,7 +198,7 @@ interface FilmstripDimensions {
     gridDimensions?: {
         columns: number;
         rows: number;
-    }
+    };
     hasScroll?: boolean;
     thumbnailSize?: Dimensions;
 }
@@ -206,7 +206,7 @@ interface FilmstripDimensions {
 export interface IFilmstripState {
     activeParticipants: Array<{
         participantId: string;
-        pinned?: boolean
+        pinned?: boolean;
     }>;
     enabled: boolean;
     horizontalViewDimensions: {
@@ -226,12 +226,12 @@ export interface IFilmstripState {
         filmstripWidth?: number;
         thumbnailSize?: Dimensions;
     };
-    screenshareFilmstripParticipantId?: string|null;
+    screenshareFilmstripParticipantId?: string | null;
     stageFilmstripDimensions: FilmstripDimensions;
     tileViewDimensions?: FilmstripDimensions;
     topPanelHeight: {
-        current: number|null;
-        userSet: number|null;
+        current: number | null;
+        userSet: number | null;
     };
     topPanelVisible: boolean;
     verticalViewDimensions: {
@@ -253,9 +253,9 @@ export interface IFilmstripState {
     visibleParticipantsStartIndex: number;
     visibleRemoteParticipants: Set<string>;
     width: {
-        current: number|null;
-        userSet: number|null;
-    }
+        current: number | null;
+        userSet: number | null;
+    };
 }
 
 ReducerRegistry.register<IFilmstripState>(