fix(prejoin) fix prejoin app dialogs not being visible

https://github.com/jitsi/lib-jitsi-meet/compare/v1549.0.0+877c4546...v1553.0.0+57646337

.devcontainer/devcontainer.json

@@ -0,0 +1,15 @@
+{
+  "name": "Jitsi Meet Dev Container",
+  "image": "mcr.microsoft.com/devcontainers/universal:2",
+  "features": {
+    "ghcr.io/devcontainers/features/node:1": {
+      "version": "16"
+    }
+  },
+  "hostRequirements": {
+    "cpus": 4,
+    "memory": "8gb",
+    "storage": "32gb" 
+  },
+  "postCreateCommand": "bash -i -c 'nvm use && npm install && cp tsconfig.web.json tsconfig.json'"
+}

CONTRIBUTING.md

@@ -141,7 +141,7 @@ react/features/sample/
 ```
 
 The middleware must be imported in `react/features/app/` specifically
-in `middlewares.any`, `middlewares.native.js` or `middlewares.web.js` where appropriate.
+in `middlewares.any.ts`, `middlewares.native.ts` or `middlewares.web.ts` where appropriate.
 Likewise for the reducer.
 
 An `index.js` file must not be provided for exporting actions, action types and

conference.js

@@ -459,6 +459,11 @@ export default {
      */
     _localTracksInitialized: false,
 
+    /**
+     * Flag used to prevent the creation of another local video track in this.muteVideo if one is already in progress.
+     */
+    isCreatingLocalTrack: false,
+
     isSharingScreen: false,
 
     /**
@@ -1028,11 +1033,13 @@ export default {
 
         const localVideo = getLocalJitsiVideoTrack(APP.store.getState());
 
-        if (!localVideo && !mute) {
+        if (!localVideo && !mute && !this.isCreatingLocalTrack) {
             const maybeShowErrorDialog = error => {
                 showUI && APP.store.dispatch(notifyCameraError(error));
             };
 
+            this.isCreatingLocalTrack = true;
+
             // Try to create local video if there wasn't any.
             // This handles the case when user joined with no video
             // (dismissed screen sharing screen or in audio only mode), but
@@ -1054,6 +1061,9 @@ export default {
                     logger.debug(`muteVideo: calling useVideoStream for track: ${videoTrack}`);
 
                     return this.useVideoStream(videoTrack);
+                })
+                .finally(() => {
+                    this.isCreatingLocalTrack = false;
                 });
         } else {
             // FIXME show error dialog if it fails (should be handled by react)

config.js

@@ -580,9 +580,19 @@ var config = {
     // Require users to always specify a display name.
     // requireDisplayName: true,
 
+    // DEPRECATED! Use 'welcomePage.disabled' instead.
     // Whether to use a welcome page or not. In case it's false a random room
     // will be joined when no room is specified.
-    enableWelcomePage: true,
+    // enableWelcomePage: true,
+
+    // Configs for welcome page.
+    // welcomePage: {
+    //     // Whether to disable welcome page. In case it's disabled a random room
+    //     // will be joined when no room is specified.
+    //     disabled: false,
+    //     // If set,landing page will redirect to this URL.
+    //     customUrl: ''
+    // },
 
     // Disable app shortcuts that are registered upon joining a conference
     // disableShortcuts: false,

css/_polls.scss

@@ -121,13 +121,6 @@ ol.poll-result-list {
     display: flex;
 }
 
-.poll-dragged {
-    opacity: 0.5;
-    * {
-        cursor: grabbing !important;
-    }
-}
-
 .poll-question {
     font-size: 16px;
     font-weight: 600;

css/premeeting/_prejoin-third-party.scss

@@ -2,7 +2,8 @@ $sidePanelWidth: 300px;
 
 .prejoin-third-party {
   flex-direction: column-reverse;
-  
+  z-index: auto;
+
   .content {
       height: auto;
       margin: 0 auto;

globals.d.ts

@@ -14,6 +14,7 @@ declare global {
             registerShortcut: Function;
             unregisterShortcut: Function;
             openDialog: Function;
+            enable: Function;
         }
     };
     const interfaceConfig: any;

lang/main.json

@@ -147,6 +147,7 @@
         "bridgeCount": "Server count: ",
         "codecs": "Codecs (A/V): ",
         "connectedTo": "Connected to:",
+        "e2eeVerified": "E2EE verified:",
         "framerate": "Frame rate:",
         "less": "Show less",
         "localaddress": "Local address:",
@@ -408,6 +409,10 @@
         "user": "User",
         "userIdentifier": "User identifier",
         "userPassword": "User password",
+        "verifyParticipantConfirm": "They match",
+        "verifyParticipantDismiss": "They do not match",
+        "verifyParticipantQuestion": "EXPERIMENTAL: Ask participant {{participantName}} if they see the same content, in the same order.",
+        "verifyParticipantTitle": "User verification",
         "videoLink": "Video link",
         "viewUpgradeOptions": "View upgrade options",
         "viewUpgradeOptionsContent": "To get unlimited access to premium features like recording, transcriptions, RTMP Streaming & more, you'll need to upgrade your plan.",
@@ -1297,6 +1302,7 @@
         "show": "Show on stage",
         "showSelfView": "Show self view",
         "unpinFromStage": "Unpin",
+        "verify": "Verify participant",
         "videoMuted": "Camera disabled",
         "videomute": "Participant has stopped the camera"
     },

package-lock.json

@@ -28,7 +28,7 @@
         "@giphy/react-native-sdk": "1.7.0",
         "@hapi/bourne": "2.0.0",
         "@jitsi/excalidraw": "https://github.com/jitsi/excalidraw/releases/download/v0.0.12/jitsi-excalidraw-0.0.12.tgz",
-        "@jitsi/js-utils": "2.0.4",
+        "@jitsi/js-utils": "2.0.5",
         "@jitsi/logger": "2.0.0",
         "@jitsi/rnnoise-wasm": "0.1.0",
         "@jitsi/rtcstats": "9.5.0",
@@ -74,7 +74,7 @@
         "js-md5": "0.6.1",
         "js-sha512": "0.8.0",
         "jwt-decode": "2.2.0",
-        "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1539.0.0+eb4873d2/lib-jitsi-meet.tgz",
+        "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet#66877b963df15a23e612166e9151602a8343baf0",
         "lodash": "4.17.21",
         "moment": "2.29.4",
         "moment-duration-format": "2.2.2",
@@ -3756,9 +3756,9 @@
       }
     },
     "node_modules/@jitsi/js-utils": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@jitsi/js-utils/-/js-utils-2.0.4.tgz",
-      "integrity": "sha512-voXa8Y8srv/q3gD9wWOGMPVqOWT4s0n4B/ApkPDAIN8EG/6mpzAfHNMi4BIOQeeo2P0srIdcD6Y/1S/ftjuhYQ==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@jitsi/js-utils/-/js-utils-2.0.5.tgz",
+      "integrity": "sha512-Aa7lt/sGsDymWnKJtM1RePmR2b2J5TwY3QLv5iOmzMDYR+5RE0NyYc/vKW51JeatDVSkj+LT7kpUDvtJua0rmQ==",
       "dependencies": {
         "bowser": "2.7.0",
         "js-md5": "0.7.3"
@@ -13497,8 +13497,8 @@
     },
     "node_modules/lib-jitsi-meet": {
       "version": "0.0.0",
-      "resolved": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1539.0.0+eb4873d2/lib-jitsi-meet.tgz",
-      "integrity": "sha512-hEu5nmljbOVKPHIcCpW6GTFzZpWDOAfplKTkNdvrIyNgMiIjHhUgmMzF+IGicd7KPud3z8aQ+0HFnpcxO/T6ZA==",
+      "resolved": "git+ssh://git@github.com/jitsi/lib-jitsi-meet.git#66877b963df15a23e612166e9151602a8343baf0",
+      "integrity": "sha512-yX2sYztN6Rj38JFqzZRHUWVX3g9MMkZaTgS74U2u8Vfkn9blsZeRTju+/Ko+ZQezQX8qG/qNRsCtOX0Z16OFhA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@jitsi/js-utils": "2.0.0",
@@ -23182,9 +23182,9 @@
       "integrity": "sha512-WFzaH5GCZLA5DTSZ6ReqAz9g53mSgi+211zTC7AFZUYZme5tzKpPg55AKkJZA3ZIRikkbKaEfP/dC4QOH5NMmA=="
     },
     "@jitsi/js-utils": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@jitsi/js-utils/-/js-utils-2.0.4.tgz",
-      "integrity": "sha512-voXa8Y8srv/q3gD9wWOGMPVqOWT4s0n4B/ApkPDAIN8EG/6mpzAfHNMi4BIOQeeo2P0srIdcD6Y/1S/ftjuhYQ==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@jitsi/js-utils/-/js-utils-2.0.5.tgz",
+      "integrity": "sha512-Aa7lt/sGsDymWnKJtM1RePmR2b2J5TwY3QLv5iOmzMDYR+5RE0NyYc/vKW51JeatDVSkj+LT7kpUDvtJua0rmQ==",
       "requires": {
         "bowser": "2.7.0",
         "js-md5": "0.7.3"
@@ -30510,8 +30510,9 @@
       }
     },
     "lib-jitsi-meet": {
-      "version": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1539.0.0+eb4873d2/lib-jitsi-meet.tgz",
-      "integrity": "sha512-hEu5nmljbOVKPHIcCpW6GTFzZpWDOAfplKTkNdvrIyNgMiIjHhUgmMzF+IGicd7KPud3z8aQ+0HFnpcxO/T6ZA==",
+      "version": "git+ssh://git@github.com/jitsi/lib-jitsi-meet.git#66877b963df15a23e612166e9151602a8343baf0",
+      "integrity": "sha512-yX2sYztN6Rj38JFqzZRHUWVX3g9MMkZaTgS74U2u8Vfkn9blsZeRTju+/Ko+ZQezQX8qG/qNRsCtOX0Z16OFhA==",
+      "from": "lib-jitsi-meet@https://github.com/jitsi/lib-jitsi-meet#66877b963df15a23e612166e9151602a8343baf0",
       "requires": {
         "@jitsi/js-utils": "2.0.0",
         "@jitsi/logger": "2.0.0",

package.json

@@ -33,7 +33,7 @@
     "@giphy/react-native-sdk": "1.7.0",
     "@hapi/bourne": "2.0.0",
     "@jitsi/excalidraw": "https://github.com/jitsi/excalidraw/releases/download/v0.0.12/jitsi-excalidraw-0.0.12.tgz",
-    "@jitsi/js-utils": "2.0.4",
+    "@jitsi/js-utils": "2.0.5",
     "@jitsi/logger": "2.0.0",
     "@jitsi/rnnoise-wasm": "0.1.0",
     "@jitsi/rtcstats": "9.5.0",
@@ -79,7 +79,7 @@
     "js-md5": "0.6.1",
     "js-sha512": "0.8.0",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1539.0.0+eb4873d2/lib-jitsi-meet.tgz",
+    "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet#66877b963df15a23e612166e9151602a8343baf0",
     "lodash": "4.17.21",
     "moment": "2.29.4",
     "moment-duration-format": "2.2.2",

react/features/analytics/handlers/AmplitudeHandler.ts

@@ -1,5 +1,3 @@
-/* eslint-disable lines-around-comment */
-
 import logger from '../logger';
 
 import AbstractHandler, { IEvent } from './AbstractHandler';
@@ -103,8 +101,10 @@ export default class AmplitudeHandler extends AbstractHandler {
 
         return {
             sessionId: amplitude.getInstance().getSessionId(),
+
             // @ts-ignore
             deviceId: amplitude.getInstance().options.deviceId,
+
             // @ts-ignore
             userId: amplitude.getInstance().options.userId
         };

react/features/app/actions.web.ts

@@ -21,6 +21,7 @@ import { isVpaasMeeting } from '../jaas/functions';
 import { clearNotifications, showNotification } from '../notifications/actions';
 import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
 import { setFatalError } from '../overlay/actions';
+import { isWelcomePageEnabled } from '../welcome/functions';
 
 import {
     redirectToStaticPage,
@@ -203,7 +204,7 @@ export function maybeRedirectToWelcomePage(options: { feedbackSubmitted?: boolea
 
         // if Welcome page is enabled redirect to welcome page after 3 sec, if
         // there is a thank you message to be shown, 0.5s otherwise.
-        if (getState()['features/base/config'].enableWelcomePage) {
+        if (isWelcomePageEnabled(getState())) {
             setTimeout(
                 () => {
                     dispatch(redirectWithStoredParams('/'));

react/features/app/getRouteToRender.web.js

@@ -8,7 +8,7 @@ import { Conference } from '../conference';
 import { getDeepLinkingPage } from '../deep-linking';
 import { UnsupportedDesktopBrowser } from '../unsupported-browser';
 import { BlankPage, WelcomePage } from '../welcome';
-import { isWelcomePageEnabled } from '../welcome/functions';
+import { getCustomLandingPageURL, isWelcomePageEnabled } from '../welcome/functions';
 
 /**
  * Determines which route is to be rendered in order to depict a specific Redux
@@ -75,7 +75,13 @@ function _getWebWelcomePageRoute(state) {
 
     if (isWelcomePageEnabled(state)) {
         if (isSupportedBrowser()) {
-            route.component = WelcomePage;
+            const customLandingPage = getCustomLandingPageURL(state);
+
+            if (customLandingPage) {
+                route.href = customLandingPage;
+            } else {
+                route.component = WelcomePage;
+            }
         } else {
             route.component = UnsupportedDesktopBrowser;
         }

react/features/app/middlewares.any.ts

@@ -11,6 +11,7 @@ import '../base/media/middleware';
 import '../base/net-info/middleware';
 import '../base/participants/middleware';
 import '../base/responsive-ui/middleware';
+import '../base/redux/middleware';
 import '../base/settings/middleware';
 import '../base/sounds/middleware';
 import '../base/testing/middleware';

react/features/app/middlewares.web.ts

@@ -2,7 +2,6 @@ import '../authentication/middleware';
 import '../base/i18n/middleware';
 import '../base/devices/middleware';
 import '../base/media/middleware';
-import '../base/redux/middleware';
 import '../dynamic-branding/middleware';
 import '../e2ee/middleware';
 import '../external-api/middleware';

react/features/base/conference/actions.ts

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import { createStartMutedConfigurationEvent } from '../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../analytics/functions';
 import { appNavigate } from '../../app/actions';
@@ -111,6 +110,7 @@ function _addConferenceListeners(conference: IJitsiConference, dispatch: IStore[
         JitsiConferenceEvents.CONFERENCE_LEFT,
         (...args: any[]) => {
             dispatch(conferenceTimestampChanged(0));
+
             // @ts-ignore
             dispatch(conferenceLeft(conference, ...args));
         });

react/features/base/conference/reducer.ts

@@ -59,6 +59,7 @@ export interface IJitsiConference {
     grantOwner: Function;
     isAVModerationSupported: Function;
     isCallstatsEnabled: Function;
+    isE2EEEnabled: Function;
     isEndConferenceSupported: Function;
     isLobbySupported: Function;
     isSIPCallingSupported: Function;
@@ -71,6 +72,7 @@ export interface IJitsiConference {
     muteParticipant: Function;
     myLobbyUserId: Function;
     myUserId: Function;
+    off: Function;
     on: Function;
     removeTrack: Function;
     replaceTrack: Function;
@@ -88,6 +90,7 @@ export interface IJitsiConference {
     setReceiverConstraints: Function;
     setSenderVideoConstraint: Function;
     setSubject: Function;
+    startVerification: Function;
 }
 
 export interface IConferenceState {

react/features/base/config/configType.ts

@@ -316,6 +316,7 @@ export interface IConfig {
         sdkKey?: string;
         tileTime?: number;
     };
+    googleApiApplicationClientID?: string;
     gravatar?: {
         baseUrl?: string;
         disabled?: boolean;
@@ -366,6 +367,7 @@ export interface IConfig {
     localSubject?: string;
     locationURL?: URL;
     maxFullResolutionParticipants?: number;
+    microsoftApiApplicationClientID?: string;
     moderatedRoomServiceUrl?: string;
     mouseMoveCallbackInterval?: number;
     noticeMessage?: string;
@@ -504,6 +506,10 @@ export interface IConfig {
     webrtcIceUdpDisable?: boolean;
     websocket?: string;
     websocketKeepAliveUrl?: string;
+    welcomePage?: {
+        customUrl?: string;
+        disabled?: boolean;
+    };
     whiteboard?: {
         collabServerBaseUrl?: string;
         enabled?: boolean;

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

@@ -1,6 +1,6 @@
-/* eslint-disable lines-around-comment */
 // @ts-ignore
 import Bourne from '@hapi/bourne';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { jitsiLocalStorage } from '@jitsi/js-utils';
 import _ from 'lodash';

react/features/base/config/reducer.ts

@@ -77,6 +77,7 @@ export interface IConfigState extends IConfig {
     analysis?: {
         obfuscateRoomName?: boolean;
     };
+    disableRemoteControl?: boolean;
     error?: Error;
 }
 
@@ -337,6 +338,13 @@ function _translateLegacyConfig(oldValue: IConfig) {
         });
     }
 
+    newValue.welcomePage = oldValue.welcomePage || {};
+    if (oldValue.hasOwnProperty('enableWelcomePage')
+        && !newValue.welcomePage.hasOwnProperty('disabled')
+    ) {
+        newValue.welcomePage.disabled = !oldValue.enableWelcomePage;
+    }
+
     newValue.prejoinConfig = oldValue.prejoinConfig || {};
     if (oldValue.hasOwnProperty('prejoinPageEnabled')
         && !newValue.prejoinConfig.hasOwnProperty('enabled')

react/features/base/connection/reducer.ts

@@ -16,6 +16,7 @@ import { ConnectionFailedError } from './actions.any';
 export interface IConnectionState {
     connecting?: any;
     connection?: {
+        addFeature: Function;
         disconnect: Function;
         getJid: () => string;
         getLogs: () => Object;

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

@@ -4,6 +4,7 @@ import WaitForOwnerDialog from '../../authentication/components/web/WaitForOwner
 import ChatPrivacyDialog from '../../chat/components/web/ChatPrivacyDialog';
 import DesktopPicker from '../../desktop-picker/components/DesktopPicker';
 import DisplayNamePrompt from '../../display-name/components/web/DisplayNamePrompt';
+import ParticipantVerificationDialog from '../../e2ee/components/ParticipantVerificationDialog';
 import EmbedMeetingDialog from '../../embed-meeting/components/EmbedMeetingDialog';
 // @ts-ignore
 import FeedbackDialog from '../../feedback/components/FeedbackDialog.web';
@@ -49,7 +50,7 @@ const NEW_DIALOG_LIST = [ KeyboardShortcutsDialog, ChatPrivacyDialog, DisplayNam
     SharedVideoDialog, SpeakerStats, LanguageSelectorDialog, MuteEveryoneDialog, MuteEveryonesVideoDialog,
     GrantModeratorDialog, KickRemoteParticipantDialog, MuteRemoteParticipantsVideoDialog, VideoQualityDialog,
     VirtualBackgroundDialog, LoginDialog, WaitForOwnerDialog, DesktopPicker, RemoteControlAuthorizationDialog,
-    LogoutDialog, SalesforceLinkDialog ];
+    LogoutDialog, SalesforceLinkDialog, ParticipantVerificationDialog ];
 
 // This function is necessary while the transition from @atlaskit dialog to our component is ongoing.
 const isNewDialog = (component: any) => NEW_DIALOG_LIST.some(comp => comp === component);

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

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

react/features/base/participants/actions.ts

@@ -477,18 +477,19 @@ export function participantMutedUs(participant: any, track: any) {
 /**
  * Action to create a virtual screenshare participant.
  *
- * @param {(string)} sourceName - JitsiTrack instance.
- * @param {(boolean)} local - JitsiTrack instance.
+ * @param {(string)} sourceName - The source name of the JitsiTrack instance.
+ * @param {(boolean)} local - Whether it's a local or remote participant.
+ * @param {JitsiConference} conference - The conference instance for which the participant is to be created.
  * @returns {Function}
  */
-export function createVirtualScreenshareParticipant(sourceName: string, local: boolean) {
+export function createVirtualScreenshareParticipant(sourceName: string, local: boolean, conference: any) {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const ownerId = getVirtualScreenshareParticipantOwnerId(sourceName);
         const ownerName = getParticipantDisplayName(state, ownerId);
 
         dispatch(participantJoined({
-            conference: state['features/base/conference'].conference,
+            conference,
             fakeParticipant: local ? FakeParticipant.LocalScreenShare : FakeParticipant.RemoteScreenShare,
             id: sourceName,
             name: ownerName

react/features/base/participants/functions.ts

@@ -1,9 +1,7 @@
-/* eslint-disable lines-around-comment */
 // @ts-ignore
 import { getGravatarURL } from '@jitsi/js-utils/avatar';
 
 import { IReduxState, IStore } from '../../app/types';
-// @ts-ignore
 import { isStageFilmstripAvailable } from '../../filmstrip/functions';
 import { IStateful } from '../app/types';
 import { GRAVATAR_BASE_URL } from '../avatar/constants';
@@ -20,6 +18,7 @@ import {
     PARTICIPANT_ROLE,
     WHITEBOARD_PARTICIPANT_ICON
 } from './constants';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { preloadImage } from './preloadImage';
 import { FakeParticipant, IParticipant } from './types';

react/features/base/participants/subscriber.ts

@@ -46,7 +46,7 @@ function _updateScreenshareParticipants({ getState, dispatch }: IStore) {
 
     if (getMultipleVideoSendingSupportFeatureFlag(state)) {
         if (!localScreenShare && newLocalSceenshareSourceName) {
-            dispatch(createVirtualScreenshareParticipant(newLocalSceenshareSourceName, true));
+            dispatch(createVirtualScreenshareParticipant(newLocalSceenshareSourceName, true, conference));
         }
 
         if (localScreenShare && !newLocalSceenshareSourceName) {
@@ -68,7 +68,7 @@ function _updateScreenshareParticipants({ getState, dispatch }: IStore) {
     }
 
     if (addedScreenshareSourceNames.length) {
-        addedScreenshareSourceNames.forEach(id => dispatch(createVirtualScreenshareParticipant(id, false)));
-
+        addedScreenshareSourceNames.forEach(id => dispatch(
+            createVirtualScreenshareParticipant(id, false, conference)));
     }
 }

react/features/base/participants/types.ts

@@ -13,6 +13,8 @@ export interface IParticipant {
     dominantSpeaker?: boolean;
     e2eeEnabled?: boolean;
     e2eeSupported?: boolean;
+    e2eeVerificationAvailable?: boolean;
+    e2eeVerified?: boolean;
     email?: string;
     fakeParticipant?: FakeParticipant;
     features?: {

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

@@ -10,8 +10,8 @@ import { navigate }
     from '../../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 // @ts-ignore
 import { screen } from '../../../../mobile/navigation/routes';
-// @ts-ignore
-import { SETTINGS_ENABLED, getFeatureFlag } from '../../../flags';
+import { SETTINGS_ENABLED } from '../../../flags/constants';
+import { getFeatureFlag } from '../../../flags/functions';
 import { connect } from '../../../redux/functions';
 
 /**

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import _ from 'lodash';
 import { AnyAction } from 'redux';
 

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

@@ -1,6 +1,5 @@
-/* eslint-disable lines-around-comment */
-
 import { IReduxState, IStore } from '../../app/types';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { setPictureInPictureEnabled } from '../../mobile/picture-in-picture/functions';
 import { setAudioOnly } from '../audio-only/actions';
@@ -8,7 +7,6 @@ import JitsiMeetJS from '../lib-jitsi-meet';
 
 import { destroyLocalDesktopTrackIfExists, replaceLocalTrack } from './actions.any';
 import { getLocalVideoTrack, isLocalVideoTrackDesktop } from './functions';
-/* eslint-enable lines-around-comment */
 
 export * from './actions.any';
 

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

@@ -8,7 +8,6 @@ import { showNotification } from '../../notifications/actions';
 import { NOTIFICATION_TIMEOUT_TYPE } from '../../notifications/constants';
 // @ts-ignore
 import { stopReceiver } from '../../remote-control/actions';
-// @ts-ignore
 import { setScreenAudioShareState, setScreenshareAudioTrack } from '../../screen-share/actions';
 import { isAudioOnlySharing, isScreenVideoShared } from '../../screen-share/functions';
 // @ts-ignore

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

@@ -1,4 +1,3 @@
-// @ts-ignore
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import {

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

@@ -1,8 +1,8 @@
-/* eslint-disable lines-around-comment */
 import React from 'react';
 import { TouchableRipple } from 'react-native-paper';
 
 import Icon from '../../../icons/components/Icon';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import styles from '../../../react/components/native/styles';
 import { IIconButtonProps } from '../../../react/types';

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

@@ -27,6 +27,7 @@ const useStyles = makeStyles()(theme => {
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'flex-start',
+            zIndex: 301,
             animation: `${keyframes`
                 0% {
                     opacity: 0.4;

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

@@ -3,6 +3,10 @@ import React, { Component, ComponentType } from 'react';
 
 import { IReduxState } from '../../../../app/types';
 import { IReactionEmojiProps } from '../../../../reactions/constants';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
+import { JitsiPortal } from '../../../../toolbox/components/web';
+import { showOverflowDrawer } from '../../../../toolbox/functions.web';
 import { connect } from '../../../redux/functions';
 
 import DialogTransition from './DialogTransition';
@@ -24,6 +28,11 @@ interface IProps {
      */
     _isNewDialog: boolean;
 
+    /**
+     * Whether the overflow drawer should be used.
+     */
+    _overflowDrawer: boolean;
+
     /**
      * Array of reactions to be displayed.
      */
@@ -69,7 +78,9 @@ class DialogContainer extends Component<IProps> {
     render() {
         return this.props._isNewDialog ? (
             <DialogTransition>
-                {this._renderDialogContent()}
+                {this.props._overflowDrawer
+                    ? <JitsiPortal>{this._renderDialogContent()}</JitsiPortal>
+                    : this._renderDialogContent() }
             </DialogTransition>
         ) : (
             <ModalTransition>
@@ -90,11 +101,13 @@ class DialogContainer extends Component<IProps> {
 function mapStateToProps(state: IReduxState) {
     const stateFeaturesBaseDialog = state['features/base/dialog'];
     const { reducedUI } = state['features/base/responsive-ui'];
+    const overflowDrawer = showOverflowDrawer(state);
 
     return {
         _component: stateFeaturesBaseDialog.component,
         _componentProps: stateFeaturesBaseDialog.componentProps,
         _isNewDialog: stateFeaturesBaseDialog.isNewDialog,
+        _overflowDrawer: overflowDrawer,
         _reducedUI: reducedUI
     };
 }

react/features/calendar-sync/actions.any.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import {
     REFRESH_CALENDAR,
     SET_CALENDAR_AUTHORIZATION,
@@ -19,8 +17,7 @@ import {
  *     isInteractive: boolean
  * }}
  */
-export function refreshCalendar(
-        forcePermission: boolean = false, isInteractive: boolean = true) {
+export function refreshCalendar(forcePermission = false, isInteractive = true) {
     return {
         type: REFRESH_CALENDAR,
         forcePermission,
@@ -39,7 +36,7 @@ export function refreshCalendar(
  *     authorization: ?string
  * }}
  */
-export function setCalendarAuthorization(authorization: ?string) {
+export function setCalendarAuthorization(authorization?: string) {
     return {
         type: SET_CALENDAR_AUTHORIZATION,
         authorization

react/features/calendar-sync/actions.native.ts

@@ -1,13 +1,15 @@
-// @flow
+// @ts-expect-error
 import { generateRoomWithoutSeparator } from '@jitsi/js-utils/random';
-import type { Dispatch } from 'redux';
 
 import { getDefaultURL } from '../app/functions';
-import { openDialog } from '../base/dialog';
+import { IStore } from '../app/types';
+import { openDialog } from '../base/dialog/actions';
 
 import { refreshCalendar } from './actions';
 import {
     UpdateCalendarEventDialog
+
+    // @ts-ignore
 } from './components';
 import { addLinkToCalendarEntry } from './functions.native';
 
@@ -35,11 +37,13 @@ export function openUpdateCalendarEventDialog(eventId: string) {
  * @returns {Function}
  */
 export function updateCalendarEvent(eventId: string) {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const defaultUrl = getDefaultURL(getState);
         const roomName = generateRoomWithoutSeparator();
 
         addLinkToCalendarEntry(getState(), eventId, `${defaultUrl}/${roomName}`)
+
+        // @ts-ignore
         .finally(() => {
             dispatch(refreshCalendar(false, false));
         });

react/features/calendar-sync/actions.web.ts

@@ -1,9 +1,11 @@
-// @flow
-
+// @ts-expect-error
 import { generateRoomWithoutSeparator } from '@jitsi/js-utils/random';
-import type { Dispatch } from 'redux';
 
-import { createCalendarConnectedEvent, sendAnalytics } from '../analytics';
+import { createCalendarConnectedEvent } from '../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../analytics/functions';
+import { IStore } from '../app/types';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
 import { loadGoogleAPI } from '../google-api';
 
 import {
@@ -14,8 +16,8 @@ import {
     SET_CALENDAR_PROFILE_EMAIL,
     SET_LOADING_CALENDAR_EVENTS
 } from './actionTypes';
-import { refreshCalendar, setCalendarEvents } from './actions';
-import { _getCalendarIntegration, isCalendarEnabled } from './functions';
+import { refreshCalendar, setCalendarEvents } from './actions.web';
+import { _getCalendarIntegration, isCalendarEnabled } from './functions.web';
 import logger from './logger';
 
 export * from './actions.any';
@@ -26,8 +28,8 @@ export * from './actions.any';
  *
  * @returns {Function}
  */
-export function bootstrapCalendarIntegration(): Function {
-    return (dispatch, getState) => {
+export function bootstrapCalendarIntegration() {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
 
         if (!isCalendarEnabled(state)) {
@@ -63,7 +65,7 @@ export function bootstrapCalendarIntegration(): Function {
                 }
 
                 return dispatch(integrationToLoad._isSignedIn())
-                    .then(signedIn => {
+                    .then((signedIn: boolean) => {
                         if (signedIn) {
                             dispatch(setIntegrationReady(integrationType));
                             dispatch(updateProfile(integrationType));
@@ -114,7 +116,7 @@ export function openUpdateCalendarEventDialog(
  *     msAuthState: Object
  * }}
  */
-export function setCalendarAPIAuthState(newState: ?Object) {
+export function setCalendarAPIAuthState(newState?: Object) {
     return {
         type: SET_CALENDAR_AUTH_STATE,
         msAuthState: newState
@@ -130,7 +132,7 @@ export function setCalendarAPIAuthState(newState: ?Object) {
  *     error: Object
  * }}
  */
-export function setCalendarError(error: ?Object) {
+export function setCalendarError(error?: Object) {
     return {
         type: SET_CALENDAR_ERROR,
         error
@@ -146,7 +148,7 @@ export function setCalendarError(error: ?Object) {
  *     email: string
  * }}
  */
-export function setCalendarProfileEmail(newEmail: ?string) {
+export function setCalendarProfileEmail(newEmail?: string) {
     return {
         type: SET_CALENDAR_PROFILE_EMAIL,
         email: newEmail
@@ -196,8 +198,8 @@ export function setIntegrationReady(integrationType: string) {
  * signed into.
  * @returns {Function}
  */
-export function signIn(calendarType: string): Function {
-    return (dispatch: Dispatch<any>) => {
+export function signIn(calendarType: string) {
+    return (dispatch: IStore['dispatch']) => {
         const integration = _getCalendarIntegration(calendarType);
 
         if (!integration) {
@@ -210,7 +212,7 @@ export function signIn(calendarType: string): Function {
             .then(() => dispatch(updateProfile(calendarType)))
             .then(() => dispatch(refreshCalendar()))
             .then(() => sendAnalytics(createCalendarConnectedEvent()))
-            .catch(error => {
+            .catch((error: any) => {
                 logger.error(
                     'Error occurred while signing into calendar integration',
                     error);
@@ -228,10 +230,10 @@ export function signIn(calendarType: string): Function {
  * @param {string} calendarId - The id of the calendar to use.
  * @returns {Function}
  */
-export function updateCalendarEvent(id: string, calendarId: string): Function {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+export function updateCalendarEvent(id: string, calendarId: string) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
 
-        const { integrationType } = getState()['features/calendar-sync'];
+        const { integrationType = '' } = getState()['features/calendar-sync'];
         const integration = _getCalendarIntegration(integrationType);
 
         if (!integration) {
@@ -240,7 +242,7 @@ export function updateCalendarEvent(id: string, calendarId: string): Function {
 
         const { locationURL } = getState()['features/base/connection'];
         const newRoomName = generateRoomWithoutSeparator();
-        let href = locationURL.href;
+        let href = locationURL?.href ?? '';
 
         href.endsWith('/') || (href += '/');
 
@@ -275,8 +277,8 @@ export function updateCalendarEvent(id: string, calendarId: string): Function {
  * should be updated.
  * @returns {Function}
  */
-export function updateProfile(calendarType: string): Function {
-    return (dispatch: Dispatch<any>) => {
+export function updateProfile(calendarType: string) {
+    return (dispatch: IStore['dispatch']) => {
         const integration = _getCalendarIntegration(calendarType);
 
         if (!integration) {
@@ -284,7 +286,7 @@ export function updateProfile(calendarType: string): Function {
         }
 
         return dispatch(integration.getCurrentEmail())
-            .then(email => {
+            .then((email: string) => {
                 dispatch(setCalendarProfileEmail(email));
             });
     };

react/features/calendar-sync/functions.any.ts

@@ -1,8 +1,6 @@
-// @flow
-
 import md5 from 'js-md5';
 
-import { APP_LINK_SCHEME, parseURIString } from '../base/util';
+import { APP_LINK_SCHEME, parseURIString } from '../base/util/uri';
 
 import { setCalendarEvents } from './actions';
 import { MAX_LIST_LENGTH } from './constants';
@@ -16,7 +14,8 @@ const ALLDAY_EVENT_LENGTH = 23 * 60 * 60 * 1000;
  * @param {Object} entry - The calendar entry.
  * @returns {boolean}
  */
-function _isDisplayableCalendarEntry(entry) {
+function _isDisplayableCalendarEntry(entry: { allDay: boolean; attendees: Object[];
+    endDate: number; startDate: number; }) {
     // Entries are displayable if:
     //   - Ends in the future (future or ongoing events)
     //   - Is not an all day event and there is only one attendee (these events
@@ -45,7 +44,8 @@ export function _updateCalendarEntries(events: Array<Object>) {
         return;
     }
 
-    // eslint-disable-next-line no-invalid-this
+    // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-invalid-this
     const { dispatch, getState } = this;
     const knownDomains = getState()['features/base/known-domains'];
     const entryMap = new Map();
@@ -106,7 +106,7 @@ export function _updateCalendarEntries(events: Array<Object>) {
  * @param {string} negativePattern - The negative pattern.
  * @returns {string}
  */
-function _checkPattern(str, positivePattern, negativePattern) {
+function _checkPattern(str: string, positivePattern: string, negativePattern: string) {
     const positiveRegExp = new RegExp(positivePattern, 'gi');
     let positiveMatch = positiveRegExp.exec(str);
 
@@ -129,7 +129,7 @@ function _checkPattern(str, positivePattern, negativePattern) {
  * @private
  * @returns {CalendarEntry}
  */
-function _parseCalendarEntry(event, knownDomains) {
+function _parseCalendarEntry(event: any, knownDomains: string[]) {
     if (event) {
         const url = _getURLFromEvent(event, knownDomains);
         const startDate = Date.parse(event.startDate);
@@ -170,7 +170,8 @@ function _parseCalendarEntry(event, knownDomains) {
  * @private
  * @returns {string}
  */
-function _getURLFromEvent(event, knownDomains) {
+function _getURLFromEvent(event: { description: string; location: string; notes: string; title: string;
+    url: string; }, knownDomains: string[]) {
     const linkTerminatorPattern = '[^\\s<>$]';
     const urlRegExp
         = `http(s)?://(${knownDomains.join('|')})/${linkTerminatorPattern}+`;

react/features/calendar-sync/functions.native.ts

@@ -1,15 +1,17 @@
-// @flow
-
 import { NativeModules, Platform } from 'react-native';
 import RNCalendarEvents from 'react-native-calendar-events';
-import type { Store } from 'redux';
 
-import { CALENDAR_ENABLED, getFeatureFlag } from '../base/flags';
+import { IReduxState, IStore } from '../app/types';
+import { IStateful } from '../base/app/types';
+import { CALENDAR_ENABLED } from '../base/flags/constants';
+import { getFeatureFlag } from '../base/flags/functions';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
 import { getShareInfoText } from '../invite';
 
-import { setCalendarAuthorization } from './actions';
+import { setCalendarAuthorization } from './actions.native';
 import { FETCH_END_DAYS, FETCH_START_DAYS } from './constants';
-import { _updateCalendarEntries } from './functions';
+import { _updateCalendarEntries } from './functions.native';
 import logger from './logger';
 
 export * from './functions.any';
@@ -23,10 +25,10 @@ export * from './functions.any';
  * @returns {Promise<*>}
  */
 export function addLinkToCalendarEntry(
-        state: Object, id: string, link: string): Promise<any> {
+        state: IReduxState, id: string, link: string): Promise<any> {
     return new Promise((resolve, reject) => {
-        getShareInfoText(state, link, true).then(shareInfoText => {
-            RNCalendarEvents.findEventById(id).then(event => {
+        getShareInfoText(state, link, true).then((shareInfoText: string) => {
+            RNCalendarEvents.findEventById(id).then((event: any) => {
                 const updateText
                     = event.description
                         ? `${event.description}\n\n${shareInfoText}`
@@ -43,6 +45,7 @@ export function addLinkToCalendarEntry(
                     })
                 };
 
+                // @ts-ignore
                 RNCalendarEvents.saveEvent(event.title, updateObject)
                 .then(resolve, reject);
             }, reject);
@@ -61,7 +64,7 @@ export function addLinkToCalendarEntry(
  * @returns {boolean} If the app has enabled the calendar feature, {@code true};
  * otherwise, {@code false}.
  */
-export function isCalendarEnabled(stateful: Function | Object) {
+export function isCalendarEnabled(stateful: IStateful) {
     const flag = getFeatureFlag(stateful, CALENDAR_ENABLED);
 
     if (typeof flag !== 'undefined') {
@@ -85,9 +88,9 @@ export function isCalendarEnabled(stateful: Function | Object) {
  * @returns {void}
  */
 export function _fetchCalendarEntries(
-        store: Store<*, *>,
+        store: IStore,
         maybePromptForPermission: boolean,
-        forcePermission: ?boolean) {
+        forcePermission?: boolean) {
     const { dispatch, getState } = store;
     const promptForPermission
         = (maybePromptForPermission
@@ -104,6 +107,8 @@ export function _fetchCalendarEntries(
                 endDate.setDate(endDate.getDate() + FETCH_END_DAYS);
 
                 RNCalendarEvents.fetchAllEvents(
+
+                    // @ts-ignore
                     startDate.getTime(),
                     endDate.getTime(),
                     [])
@@ -126,7 +131,7 @@ export function _fetchCalendarEntries(
  * @private
  * @returns {Promise}
  */
-function _ensureCalendarAccess(promptForPermission, dispatch) {
+function _ensureCalendarAccess(promptForPermission: boolean | undefined, dispatch: IStore['dispatch']) {
     return new Promise((resolve, reject) => {
         RNCalendarEvents.checkPermissions()
             .then(status => {

react/features/calendar-sync/functions.web.ts

@@ -1,12 +1,13 @@
-// @flow
-
-import { toState } from '../base/redux';
+/* eslint-disable lines-around-comment */
+import { IStore } from '../app/types';
+import { IStateful } from '../base/app/types';
+import { toState } from '../base/redux/functions';
 
 import {
     clearCalendarIntegration,
     setCalendarError,
     setLoadingCalendarEvents
-} from './actions';
+} from './actions.web';
 export * from './functions.any';
 import {
     CALENDAR_TYPE,
@@ -14,10 +15,13 @@ import {
     FETCH_END_DAYS,
     FETCH_START_DAYS
 } from './constants';
-import { _updateCalendarEntries } from './functions';
+import { _updateCalendarEntries } from './functions.web';
 import logger from './logger';
+// @ts-ignore
 import { googleCalendarApi } from './web/googleCalendar';
+// @ts-ignore
 import { microsoftCalendarApi } from './web/microsoftCalendar';
+/* eslint-enable lines-around-comment */
 
 /**
  * Determines whether the calendar feature is enabled by the web.
@@ -27,7 +31,7 @@ import { microsoftCalendarApi } from './web/microsoftCalendar';
  * @returns {boolean} If the app has enabled the calendar feature, {@code true};
  * otherwise, {@code false}.
  */
-export function isCalendarEnabled(stateful: Function | Object) {
+export function isCalendarEnabled(stateful: IStateful) {
     const {
         enableCalendarIntegration,
         googleApiApplicationClientID,
@@ -37,26 +41,24 @@ export function isCalendarEnabled(stateful: Function | Object) {
     return Boolean(enableCalendarIntegration && (googleApiApplicationClientID || microsoftApiApplicationClientID));
 }
 
-/* eslint-disable no-unused-vars */
 /**
  * Reads the user's calendar and updates the stored entries if need be.
  *
  * @param {Object} store - The redux store.
- * @param {boolean} maybePromptForPermission - Flag to tell the app if it should
+ * @param {boolean} _maybePromptForPermission - Flag to tell the app if it should
  * prompt for a calendar permission if it wasn't granted yet.
- * @param {boolean|undefined} forcePermission - Whether to force to re-ask for
+ * @param {boolean|undefined} _forcePermission - Whether to force to re-ask for
  * the permission or not.
  * @private
  * @returns {void}
  */
 export function _fetchCalendarEntries(
-        store: Object,
-        maybePromptForPermission: boolean,
-        forcePermission: ?boolean) {
-    /* eslint-enable no-unused-vars */
+        store: IStore,
+        _maybePromptForPermission: boolean,
+        _forcePermission?: boolean) {
     const { dispatch, getState } = store;
 
-    const { integrationType } = getState()['features/calendar-sync'];
+    const { integrationType = '' } = getState()['features/calendar-sync'];
     const integration = _getCalendarIntegration(integrationType);
 
     if (!integration) {
@@ -69,7 +71,7 @@ export function _fetchCalendarEntries(
 
     dispatch(integration.load())
         .then(() => dispatch(integration._isSignedIn()))
-        .then(signedIn => {
+        .then((signedIn: boolean) => {
             if (signedIn) {
                 return Promise.resolve();
             }
@@ -80,13 +82,13 @@ export function _fetchCalendarEntries(
         })
         .then(() => dispatch(integration.getCalendarEntries(
             FETCH_START_DAYS, FETCH_END_DAYS)))
-        .then(events => _updateCalendarEntries.call({
+        .then((events: Object[]) => _updateCalendarEntries.call({
             dispatch,
             getState
         }, events))
         .then(() => {
             dispatch(setCalendarError());
-        }, error => {
+        }, (error: any) => {
             logger.error('Error fetching calendar.', error);
 
             if (error.error === ERRORS.AUTH_FAILED) {

react/features/calendar-sync/logger.ts

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

react/features/calendar-sync/middleware.ts

@@ -1,8 +1,8 @@
-// @flow
-
-import { SET_CONFIG } from '../base/config';
-import { ADD_KNOWN_DOMAINS } from '../base/known-domains';
-import { MiddlewareRegistry, equals } from '../base/redux';
+import { IStore } from '../app/types';
+import { SET_CONFIG } from '../base/config/actionTypes';
+import { ADD_KNOWN_DOMAINS } from '../base/known-domains/actionTypes';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import { equals } from '../base/redux/functions';
 import { APP_STATE_CHANGED } from '../mobile/background/actionTypes';
 
 import { REFRESH_CALENDAR } from './actionTypes';
@@ -70,7 +70,7 @@ MiddlewareRegistry.register(store => next => action => {
  * @private
  * @returns {void}
  */
-function _maybeClearAccessStatus(store, { appState }) {
+function _maybeClearAccessStatus(store: IStore, { appState }: { appState: string; }) {
     appState === 'background'
         && store.dispatch(setCalendarAuthorization(undefined));
 }

react/features/calendar-sync/reducer.tsx

@@ -29,7 +29,11 @@ const DEFAULT_STATE = {
 export interface ICalendarSyncState {
     authorization?: string;
     error?: Object;
-    events: Array<Object>;
+    events: Array<{
+        calendarId: string;
+        id: string;
+        url: string;
+    }>;
     integrationReady: boolean;
     integrationType?: string;
     isLoadingEvents?: boolean;

react/features/chat/middleware.ts

@@ -47,6 +47,7 @@ import {
 } from './constants';
 import { getUnreadCount } from './functions';
 import { INCOMING_MSG_SOUND_FILE } from './sounds';
+/* eslint-enable lines-around-comment */
 
 /**
  * Timeout for when to show the privacy notice after a private message was received.

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
@@ -9,6 +8,7 @@ import Button from '../../../../base/ui/components/native/Button';
 import { BUTTON_TYPES } from '../../../../base/ui/constants.native';
 
 import EndMeetingIcon from './EndMeetingIcon';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import styles from './styles';
 

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import React, { useCallback, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
@@ -17,7 +16,6 @@ import { IconMic, IconMicSlash } from '../../../../base/icons/svg';
 import { MEDIA_TYPE } from '../../../../base/media/constants';
 import { isLocalTrackMuted } from '../../../../base/tracks/functions';
 import { isAudioMuteButtonDisabled } from '../../../../toolbox/functions.any';
-// @ts-ignore
 import { muteLocal } from '../../../../video-menu/actions';
 
 // @ts-ignore

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -6,9 +5,9 @@ import { useDispatch, useSelector } from 'react-redux';
 import { IReduxState } from '../../../app/types';
 import { IconArrowDown } from '../../../base/icons/svg/index';
 import Label from '../../../base/label/components/web/Label';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { Tooltip } from '../../../base/tooltip';
-// @ts-ignore
 import { setTopPanelVisible } from '../../../filmstrip/actions.web';
 
 const ToggleTopPanelLabel = () => {

react/features/connection-indicator/components/native/styles.ts

@@ -1,6 +1,5 @@
-/* eslint-disable lines-around-comment */
-
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { INDICATOR_DISPLAY_THRESHOLD } from '../AbstractConnectionIndicator';
 

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

@@ -1,5 +1,3 @@
-/* eslint-disable lines-around-comment */
-
 import { Theme } from '@mui/material';
 import { withStyles } from '@mui/styles';
 import clsx from 'clsx';
@@ -29,11 +27,13 @@ import AbstractConnectionIndicator, {
     type State as AbstractState,
     INDICATOR_DISPLAY_THRESHOLD,
     mapStateToProps as _abstractMapStateToProps
+
     // @ts-ignore
 } from '../AbstractConnectionIndicator';
 
 // @ts-ignore
 import ConnectionIndicatorContent from './ConnectionIndicatorContent';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { ConnectionIndicatorIcon } from './ConnectionIndicatorIcon';
 
@@ -228,6 +228,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, IState> {
             <Popover
                 className = { clsx(classes.container, visibilityClass) }
                 content = { <ConnectionIndicatorContent
+
                     // @ts-ignore
                     inheritedStats = { this.state.stats }
                     participantId = { participantId } /> }
@@ -236,6 +237,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, IState> {
                 onPopoverClose = { this._onHidePopover }
                 onPopoverOpen = { this._onShowPopover }
                 position = { statsPopoverPosition }
+
                 // @ts-ignore
                 visible = { this.state.popoverVisible }>
                 { this._renderIndicator() }
@@ -259,6 +261,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, IState> {
             _isConnectionStatusInactive,
             _isConnectionStatusInterrupted,
             _connectionIndicatorInactiveDisabled
+
             // @ts-ignore
         } = this.props;
 
@@ -305,6 +308,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, IState> {
 
         // @ts-ignore
         return this.state.showIndicator
+
             // @ts-ignore
             || this.props.alwaysVisible
             || _isConnectionStatusInterrupted
@@ -348,6 +352,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, IState> {
             _videoTrack,
             classes,
             iconSize
+
             // @ts-ignore
         } = this.props;
 
@@ -399,5 +404,6 @@ export function _mapStateToProps(state: IReduxState, ownProps: Props) {
 }
 
 export default translate(connect(_mapStateToProps)(
+
     // @ts-ignore
     withStyles(styles)(ConnectionIndicator)));

react/features/connection-indicator/components/web/ConnectionIndicatorContent.js

@@ -189,6 +189,7 @@ class ConnectionIndicatorContent extends AbstractConnectionIndicator<Props, Stat
                 codec = { codec }
                 connectionSummary = { this._getConnectionStatusTip() }
                 disableShowMoreStats = { this.props._disableShowMoreStats }
+                e2eeVerified = { this.props._isE2EEVerified }
                 enableSaveLogs = { this.props._enableSaveLogs }
                 framerate = { framerate }
                 isLocalVideo = { this.props._isLocalVideo }
@@ -328,6 +329,7 @@ export function _mapStateToProps(state: Object, ownProps: Props) {
         _disableShowMoreStats: state['features/base/config'].disableShowMoreStats,
         _isConnectionStatusInactive,
         _isConnectionStatusInterrupted,
+        _isE2EEVerified: participant?.e2eeVerified,
         _isVirtualScreenshareParticipant: isScreenShareParticipant(participant),
         _isLocalVideo: participant?.local,
         _region: participant?.region,

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

@@ -73,6 +73,11 @@ interface IProps extends WithTranslation {
      */
     disableShowMoreStats: boolean;
 
+    /**
+     * Whether or not the participant was verified.
+     */
+    e2eeVerified: boolean;
+
     /**
      * Whether or not should display the "Save Logs" link.
      */
@@ -486,6 +491,31 @@ class ConnectionStatsTable extends Component<IProps> {
         );
     }
 
+    /**
+     * Creates a a table row as a ReactElement for displaying e2ee verication status, if present.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderE2EEVerified() {
+        const { e2eeVerified, t } = this.props;
+
+        if (e2eeVerified === undefined) {
+            return;
+        }
+
+        const status = e2eeVerified ? '\u{2705}' : '\u{274C}';
+
+        return (
+            <tr>
+                <td>
+                    <span>{ t('connectionindicator.e2eeVerified') }</span>
+                </td>
+                <td>{ status }</td>
+            </tr>
+        );
+    }
+
 
     /**
      * Creates a table row as a ReactElement for displaying a summary message
@@ -726,6 +756,7 @@ class ConnectionStatsTable extends Component<IProps> {
                     { this._renderResolution() }
                     { this._renderFrameRate() }
                     { this._renderCodecs() }
+                    { this._renderE2EEVerified() }
                 </tbody>
             </table>
         );

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import Tabs from '@atlaskit/tabs';
 import React, { PureComponent } from 'react';
 import { WithTranslation } from 'react-i18next';
@@ -8,6 +7,7 @@ import { hideDialog } from '../../base/dialog/actions';
 import { translate } from '../../base/i18n/functions';
 import { connect } from '../../base/redux/functions';
 import Dialog from '../../base/ui/components/web/Dialog';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { obtainDesktopSources } from '../functions';
 

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -11,9 +10,9 @@ import {
 } from '../../../base/participants/functions';
 import { updateSettings } from '../../../base/settings/actions';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { Tooltip } from '../../../base/tooltip';
-// @ts-ignore
 import { getIndicatorsTooltipPosition } from '../../../filmstrip/functions.web';
 import { appendSuffix } from '../../functions';
 

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

@@ -1,5 +1,3 @@
-/* eslint-disable lines-around-comment */
-
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
@@ -12,11 +10,9 @@ import {
     isWhiteboardParticipant
 } from '../../../base/participants/functions';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
-// @ts-ignore
 import { getLargeVideoParticipant } from '../../../large-video/functions';
 import { isToolboxVisible } from '../../../toolbox/functions.web';
-// @ts-ignore
-import { isLayoutTileView } from '../../../video-layout';
+import { isLayoutTileView } from '../../../video-layout/functions.web';
 
 import DisplayNameBadge from './DisplayNameBadge';
 

react/features/dropbox/actions.ts

@@ -43,7 +43,7 @@ export function authorizeDropbox() {
  *     expireDate: number
  * }}
  */
-export function updateDropboxToken(token: string, rToken: string, expireDate: number) {
+export function updateDropboxToken(token?: string, rToken?: string, expireDate?: number) {
     return {
         type: UPDATE_DROPBOX_TOKEN,
         token,

react/features/e2ee/actionTypes.ts

@@ -43,3 +43,7 @@ export const SET_MAX_MODE = 'SET_MAX_MODE';
  * }
  */
 export const SET_MEDIA_ENCRYPTION_KEY = 'SET_MEDIA_ENCRYPTION_KEY';
+
+export const START_VERIFICATION = 'START_VERIFICATION';
+
+export const PARTICIPANT_VERIFIED = 'PARTICIPANT_VERIFIED';

react/features/e2ee/actions.ts

@@ -1,8 +1,10 @@
 import {
+    PARTICIPANT_VERIFIED,
     SET_EVERYONE_ENABLED_E2EE,
     SET_EVERYONE_SUPPORT_E2EE,
     SET_MAX_MODE,
     SET_MEDIA_ENCRYPTION_KEY,
+    START_VERIFICATION,
     TOGGLE_E2EE } from './actionTypes';
 
 /**
@@ -80,3 +82,38 @@ export function setMediaEncryptionKey(keyInfo: Object) {
         keyInfo
     };
 }
+
+/**
+ * Dispatches an action to start participant e2ee verficiation process.
+ *
+ * @param {string} pId - The participant id.
+ * @returns {{
+ *     type: START_VERIFICATION,
+ *     pId: string
+ * }}
+ */
+export function startVerification(pId: string) {
+    return {
+        type: START_VERIFICATION,
+        pId
+    };
+}
+
+/**
+ * Dispatches an action to set participant e2ee verification status.
+ *
+ * @param {string} pId - The participant id.
+ * @param {boolean} isVerified - The verifcation status.
+ * @returns {{
+ *     type: PARTICIPANT_VERIFIED,
+ *     pId: string,
+ *     isVerified: boolean
+ * }}
+ */
+export function participantVerified(pId: string, isVerified: boolean) {
+    return {
+        type: PARTICIPANT_VERIFIED,
+        pId,
+        isVerified
+    };
+}

react/features/e2ee/components/ParticipantVerificationDialog.tsx

@@ -0,0 +1,166 @@
+import { withStyles } from '@mui/styles';
+import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { IReduxState, IStore } from '../../app/types';
+import { translate } from '../../base/i18n/functions';
+import { getParticipantById } from '../../base/participants/functions';
+import { connect } from '../../base/redux/functions';
+import Dialog from '../../base/ui/components/web/Dialog';
+import { participantVerified } from '../actions';
+import { ISas } from '../reducer';
+
+interface IProps extends WithTranslation {
+    classes: any;
+    decimal: string;
+    dispatch: IStore['dispatch'];
+    emoji: string;
+    pId: string;
+    participantName: string;
+    sas: ISas;
+}
+
+/**
+ * Creates the styles for the component.
+ *
+ * @param {Object} theme - The current UI theme.
+ *
+ * @returns {Object}
+ */
+const styles = () => {
+    return {
+        container: {
+            display: 'flex',
+            flexDirection: 'column',
+            margin: '16px'
+        },
+        row: {
+            alignSelf: 'center',
+            display: 'flex'
+        },
+        item: {
+            textAlign: 'center',
+            margin: '16px'
+        },
+        emoji: {
+            fontSize: '40px',
+            margin: '12px'
+        }
+    };
+};
+
+
+/**
+ * Class for the dialog displayed for E2EE sas verification.
+ */
+export class ParticipantVerificationDialog extends Component<IProps> {
+    /**
+     * Instantiates a new instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this._onConfirmed = this._onConfirmed.bind(this);
+        this._onDismissed = this._onDismissed.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const { emoji } = this.props.sas;
+        const { participantName } = this.props;
+
+        const { classes, t } = this.props;
+
+        return (
+            <Dialog
+                cancel = {{ translationKey: 'dialog.verifyParticipantDismiss' }}
+                ok = {{ translationKey: 'dialog.verifyParticipantConfirm' }}
+                onCancel = { this._onDismissed }
+                onSubmit = { this._onConfirmed }
+                titleKey = 'dialog.verifyParticipantTitle'>
+                <div>
+                    { t('dialog.verifyParticipantQuestion', { participantName }) }
+                </div>
+
+                <div className = { classes.container }>
+                    <div className = { classes.row }>
+                        {/* @ts-ignore */}
+                        {emoji.slice(0, 4).map((e: Array<string>) =>
+                            (<div
+                                className = { classes.item }
+                                key = { e.toString() }>
+                                <div className = { classes.emoji }>{ e[0] }</div>
+                                <div>{ e[1].charAt(0).toUpperCase() + e[1].slice(1) }</div>
+                            </div>))}
+                    </div>
+
+                    <div className = { classes.row }>
+                        {/* @ts-ignore */}
+                        {emoji.slice(4, 7).map((e: Array<string>) =>
+                            (<div
+                                className = { classes.item }
+                                key = { e.toString() }>
+                                <div className = { classes.emoji }>{ e[0] } </div>
+                                <div>{ e[1].charAt(0).toUpperCase() + e[1].slice(1) }</div>
+                            </div>))}
+                    </div>
+
+                </div>
+
+            </Dialog>
+        );
+    }
+
+    /**
+     * Notifies this ParticipantVerificationDialog that it has been dismissed by cancel.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onDismissed() {
+        this.props.dispatch(participantVerified(this.props.pId, false));
+
+        return true;
+    }
+
+    /**
+     * Notifies this ParticipantVerificationDialog that it has been dismissed with confirmation.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onConfirmed() {
+        this.props.dispatch(participantVerified(this.props.pId, true));
+
+        return true;
+    }
+}
+
+/**
+ * Maps part of the Redux store to the props of this component.
+ *
+ * @param {IReduxState} state - The Redux state.
+ * @param {IProps} ownProps - The own props of the component.
+ * @returns {IProps}
+ */
+export function _mapStateToProps(state: IReduxState, ownProps: IProps) {
+    const participant = getParticipantById(state, ownProps.pId);
+
+    return {
+        sas: ownProps.sas,
+        pId: ownProps.pId,
+        participantName: participant?.name
+    };
+}
+
+export default translate(connect(_mapStateToProps)(
+
+    // @ts-ignore
+    withStyles(styles)(ParticipantVerificationDialog)));

react/features/e2ee/functions.ts

@@ -1,7 +1,9 @@
+import { IReduxState } from '../app/types';
 import { IStateful } from '../base/app/types';
-import { getParticipantCount } from '../base/participants/functions';
+import { getParticipantById, getParticipantCount } from '../base/participants/functions';
 import { toState } from '../base/redux/functions';
 
+
 import { MAX_MODE_LIMIT, MAX_MODE_THRESHOLD } from './constants';
 
 /**
@@ -55,3 +57,19 @@ export function isMaxModeThresholdReached(stateful: IStateful) {
 
     return participantCount >= MAX_MODE_LIMIT + MAX_MODE_THRESHOLD;
 }
+
+/**
+ * Returns whether e2ee is enabled by the backend.
+ *
+ * @param {Object} state - The redux state.
+ * @param {string} pId - The participant id.
+ * @returns {boolean}
+ */
+export function displayVerification(state: IReduxState, pId: string) {
+    const { conference } = state['features/base/conference'];
+    const participant = getParticipantById(state, pId);
+
+    return Boolean(conference?.isE2EEEnabled()
+        && participant?.e2eeVerificationAvailable
+        && participant?.e2eeVerified === undefined);
+}

react/features/e2ee/middleware.ts

@@ -4,6 +4,8 @@ import { IStore } from '../app/types';
 import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../base/app/actionTypes';
 import { CONFERENCE_JOINED } from '../base/conference/actionTypes';
 import { getCurrentConference } from '../base/conference/functions';
+import { openDialog } from '../base/dialog/actions';
+import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
 import { PARTICIPANT_JOINED, PARTICIPANT_LEFT, PARTICIPANT_UPDATED } from '../base/participants/actionTypes';
 import { participantUpdated } from '../base/participants/actions';
 import {
@@ -17,13 +19,15 @@ import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 import StateListenerRegistry from '../base/redux/StateListenerRegistry';
 import { playSound, registerSound, unregisterSound } from '../base/sounds/actions';
 
-import { SET_MEDIA_ENCRYPTION_KEY, TOGGLE_E2EE } from './actionTypes';
+import { PARTICIPANT_VERIFIED, SET_MEDIA_ENCRYPTION_KEY, START_VERIFICATION, TOGGLE_E2EE } from './actionTypes';
 import { setE2EEMaxMode, setEveryoneEnabledE2EE, setEveryoneSupportE2EE, toggleE2EE } from './actions';
+import ParticipantVerificationDialog from './components/ParticipantVerificationDialog';
 import { E2EE_OFF_SOUND_ID, E2EE_ON_SOUND_ID, MAX_MODE } from './constants';
 import { isMaxModeReached, isMaxModeThresholdReached } from './functions';
 import logger from './logger';
 import { E2EE_OFF_SOUND_FILE, E2EE_ON_SOUND_FILE } from './sounds';
 
+
 /**
  * Middleware that captures actions related to E2EE.
  *
@@ -239,6 +243,18 @@ MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
 
         break;
     }
+
+    case PARTICIPANT_VERIFIED: {
+        const { isVerified, pId } = action;
+
+        conference?.markParticipantVerified(pId, isVerified);
+        break;
+    }
+
+    case START_VERIFICATION: {
+        conference?.startVerification(action.pId);
+        break;
+    }
     }
 
     return next(action);
@@ -254,6 +270,29 @@ StateListenerRegistry.register(
         if (previousConference) {
             dispatch(toggleE2EE(false));
         }
+
+        conference.on(JitsiConferenceEvents.E2EE_VERIFICATION_AVAILABLE, (pId: string) => {
+            dispatch(participantUpdated({
+                e2eeVerificationAvailable: true,
+                id: pId
+            }));
+        });
+
+        conference.on(JitsiConferenceEvents.E2EE_VERIFICATION_READY, (pId: string, sas: object) => {
+            dispatch(openDialog(ParticipantVerificationDialog, { pId,
+                sas }));
+        });
+
+        conference.on(JitsiConferenceEvents.E2EE_VERIFICATION_COMPLETED,
+            (pId: string, success: boolean, message: string) => {
+                if (message) {
+                    logger.warn('E2EE_VERIFICATION_COMPLETED warning', message);
+                }
+                dispatch(participantUpdated({
+                    e2eeVerified: success,
+                    id: pId
+                }));
+            });
     });
 
 /**

react/features/e2ee/reducer.ts

@@ -20,6 +20,10 @@ export interface IE2EEState {
     maxMode: string;
 }
 
+export interface ISas {
+    emoji: Array<string>;
+}
+
 /**
  * Reduces the Redux actions of the feature features/e2ee.
  */

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

@@ -17,12 +17,10 @@ import { IconArrowDown, IconArrowUp } from '../../../base/icons/svg';
 import { IParticipant } from '../../../base/participants/types';
 import { connect } from '../../../base/redux/functions';
 import { shouldHideSelfView } from '../../../base/settings/functions.web';
-// @ts-ignore
 import { showToolbox } from '../../../toolbox/actions.web';
 import { isButtonEnabled, isToolboxVisible } from '../../../toolbox/functions.web';
-// @ts-ignore
-import { getCurrentLayout } from '../../../video-layout';
 import { LAYOUTS } from '../../../video-layout/constants';
+import { getCurrentLayout } from '../../../video-layout/functions.web';
 import {
     setFilmstripVisible,
     setTopPanelVisible,
@@ -30,7 +28,6 @@ import {
     setUserFilmstripWidth,
     setUserIsResizing,
     setVisibleRemoteParticipants
-    // @ts-ignore
 } from '../../actions';
 import {
     ASPECT_RATIO_BREAKPOINT,
@@ -46,7 +43,6 @@ import {
     getVerticalViewMaxWidth,
     isStageFilmstripTopPanel,
     shouldRemoteVideosBeVisible
-    // @ts-ignore
 } from '../../functions';
 
 // @ts-ignore

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

@@ -6,8 +6,6 @@ import { IReduxState } from '../../../app/types';
 import { IconPin } from '../../../base/icons/svg';
 import { getParticipantById } from '../../../base/participants/functions';
 import BaseIndicator from '../../../base/react/components/web/BaseIndicator';
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
 import { getPinnedActiveParticipants, isStageFilmstripAvailable } from '../../functions.web';
 
 /**

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

@@ -39,10 +39,8 @@ import { hideGif, showGif } from '../../../gifs/actions';
 import { getGifDisplayMode, getGifForParticipant } from '../../../gifs/functions';
 // @ts-ignore
 import { PresenceLabel } from '../../../presence-status';
-// @ts-ignore
-import { getCurrentLayout } from '../../../video-layout';
 import { LAYOUTS } from '../../../video-layout/constants';
-// @ts-ignore
+import { getCurrentLayout } from '../../../video-layout/functions.web';
 import { togglePinStageParticipant } from '../../actions';
 import {
     DISPLAY_MODE_TO_CLASS_NAME,
@@ -60,7 +58,6 @@ import {
     isStageFilmstripAvailable,
     isVideoPlayable,
     showGridInVerticalView
-    // @ts-ignore
 } from '../../functions';
 
 // @ts-ignore
@@ -1188,7 +1185,7 @@ function _mapStateToProps(state: IReduxState, ownProps: any): Object {
     const _audioTrack = isLocal
         ? getLocalAudioTrack(tracks)
         : getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.AUDIO, id);
-    const _currentLayout = getCurrentLayout(state);
+    const _currentLayout = getCurrentLayout(state) ?? '';
     let size: any = {};
     let _isMobilePortrait = false;
     const {

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

@@ -1,5 +1,3 @@
-/* eslint-disable lines-around-comment */
-
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';

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

@@ -1,5 +1,3 @@
-/* eslint-disable lines-around-comment */
-
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
@@ -9,11 +7,11 @@ import { isMobileBrowser } from '../../../base/environment/utils';
 import { isScreenShareParticipantById } from '../../../base/participants/functions';
 import ConnectionIndicator from '../../../connection-indicator/components/web/ConnectionIndicator';
 import { STATS_POPOVER_POSITION, THUMBNAIL_TYPE } from '../../constants';
-// @ts-ignore
 import { getIndicatorsTooltipPosition } from '../../functions.web';
 
 import PinnedIndicator from './PinnedIndicator';
 import RaisedHandIndicator from './RaisedHandIndicator';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import StatusIndicators from './StatusIndicators';
 import VideoMenuTriggerButton from './VideoMenuTriggerButton';

react/features/filmstrip/subscriber.web.ts

@@ -4,8 +4,6 @@ import { getParticipantCountWithFake } from '../base/participants/functions';
 import StateListenerRegistry from '../base/redux/StateListenerRegistry';
 import { clientResized } from '../base/responsive-ui/actions';
 import { shouldHideSelfView } from '../base/settings/functions.web';
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
 import { selectParticipantInLargeVideo } from '../large-video/actions.any';
 import { getParticipantsPaneOpen } from '../participants-pane/functions';
 import { setOverflowDrawer } from '../toolbox/actions.web';

react/features/gifs/components/web/GifsMenu.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import { GiphyFetch, TrendingOptions } from '@giphy/js-fetch-api';
 import { Grid } from '@giphy/react-components';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -13,8 +12,8 @@ import Input from '../../../base/ui/components/web/Input';
 import { sendMessage } from '../../../chat/actions.any';
 import { SCROLL_SIZE } from '../../../filmstrip/constants';
 import { toggleReactionsMenuVisibility } from '../../../reactions/actions.web';
-// @ts-ignore
 import { setOverflowMenuVisible } from '../../../toolbox/actions.web';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { Drawer, JitsiPortal } from '../../../toolbox/components/web';
 import { showOverflowDrawer } from '../../../toolbox/functions.web';

react/features/invite/components/add-people-dialog/web/AddPeopleDialog.tsx

@@ -12,8 +12,7 @@ import { connect } from '../../../../base/redux/functions';
 import Dialog from '../../../../base/ui/components/web/Dialog';
 import { isDynamicBrandingDataLoaded } from '../../../../dynamic-branding/functions.any';
 import { isVpaasMeeting } from '../../../../jaas/functions';
-// @ts-ignore
-import { getActiveSession } from '../../../../recording';
+import { getActiveSession } from '../../../../recording/functions';
 // @ts-ignore
 import { updateDialInNumbers } from '../../../actions';
 import {

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

@@ -4,8 +4,6 @@ import { useStore } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
 import { translate } from '../../base/i18n/functions';
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
 import { setSeeWhatIsBeingShared } from '../actions.web';
 
 const useStyles = makeStyles()(theme => {

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

@@ -7,8 +7,6 @@ import { isLocalParticipantModerator } from '../../../base/participants/function
 import { connect } from '../../../base/redux/functions';
 import Switch from '../../../base/ui/components/web/Switch';
 import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
 import { toggleLobbyMode } from '../../actions';
 
 interface IProps extends WithTranslation {

react/features/mobile/call-integration/reducer.ts

@@ -1,9 +1,9 @@
-/* eslint-disable lines-around-comment */
 import ReducerRegistry from '../../base/redux/ReducerRegistry';
 import { set } from '../../base/redux/functions';
 
 // @ts-ignore
 import CallKit from './CallKit';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import ConnectionService from './ConnectionService';
 import { _SET_CALL_INTEGRATION_SUBSCRIPTIONS } from './actionTypes';

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import { IReduxState } from '../../app/types';
 import { translate } from '../../base/i18n/functions';
 import {
@@ -9,9 +8,9 @@ import { connect } from '../../base/redux/functions';
 import {
     AbstractButton,
     type AbstractButtonProps
+
     // @ts-ignore
 } from '../../base/toolbox/components';
-// @ts-ignore
 import { setOverflowMenuVisible } from '../../toolbox/actions';
 import { toggleNoiseSuppression } from '../actions';
 import { isNoiseSuppressionEnabled } from '../functions';

react/features/participants-pane/components/breakout-rooms/components/native/LeaveBreakoutRoomButton.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -11,6 +10,7 @@ import ContextMenu from '../../../../../base/ui/components/web/ContextMenu';
 import ContextMenuItemGroup from '../../../../../base/ui/components/web/ContextMenuItemGroup';
 import { getBreakoutRooms } from '../../../../../breakout-rooms/functions';
 import { showOverflowDrawer } from '../../../../../toolbox/functions.web';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import SendToRoomButton from '../../../../../video-menu/components/web/SendToRoomButton';
 import { AVATAR_SIZE } from '../../../../constants';

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -29,14 +28,10 @@ import {
 import ContextMenu from '../../../base/ui/components/web/ContextMenu';
 import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup';
 import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
-import {
-    openSettingsDialog,
-    shouldShowModeratorSettings
-    // @ts-ignore
-} from '../../../settings';
+import { openSettingsDialog } from '../../../settings/actions';
 import { SETTINGS_TABS } from '../../../settings/constants';
-// @ts-ignore
-import { MuteEveryonesVideoDialog } from '../../../video-menu/components';
+import { shouldShowModeratorSettings } from '../../../settings/functions.web';
+import MuteEveryonesVideoDialog from '../../../video-menu/components/web/MuteEveryonesVideoDialog';
 
 const useStyles = makeStyles()(theme => {
     return {

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

@@ -1,5 +1,3 @@
-// eslint-disable-next-line lines-around-comment
-
 import React, { useCallback, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -12,8 +10,6 @@ import Button from '../../../base/ui/components/web/Button';
 import ContextMenu from '../../../base/ui/components/web/ContextMenu';
 import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup';
 import { BUTTON_TYPES } from '../../../base/ui/constants.web';
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
 import { showLobbyChatButton } from '../../../lobby/functions';
 import { ACTION_TRIGGER, MEDIA_STATE } from '../../constants';
 import { useLobbyActions } from '../../hooks';

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -11,6 +10,7 @@ import { IconCheck, IconCloseLarge } from '../../../base/icons/svg';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import { admitMultiple } from '../../../lobby/actions.web';
 import { getKnockingParticipants, getLobbyEnabled } from '../../../lobby/functions';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { Drawer, JitsiPortal } from '../../../toolbox/components/web';
 import { showOverflowDrawer } from '../../../toolbox/functions.web';

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

@@ -1,5 +1,4 @@
 /* eslint-disable lines-around-comment */
-
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -18,8 +17,7 @@ import useContextMenu from '../../../base/ui/hooks/useContextMenu.web';
 import { normalizeAccents } from '../../../base/util/strings.web';
 import { getBreakoutRooms, getCurrentRoomId, isInBreakoutRoom } from '../../../breakout-rooms/functions';
 import { showOverflowDrawer } from '../../../toolbox/functions.web';
-// @ts-ignore
-import { muteRemote } from '../../../video-menu/actions.any';
+import { muteRemote } from '../../../video-menu/actions.web';
 import { getSortedParticipantIds, shouldRenderInviteButton } from '../../functions';
 import { useParticipantDrawer } from '../../hooks';
 

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
@@ -14,8 +13,7 @@ import ClickableIcon from '../../../base/ui/components/web/ClickableIcon';
 import { BUTTON_TYPES } from '../../../base/ui/constants.web';
 import { findAncestorByClass } from '../../../base/ui/functions.web';
 import { isAddBreakoutRoomButtonVisible } from '../../../breakout-rooms/functions';
-// @ts-ignore
-import { MuteEveryoneDialog } from '../../../video-menu/components/';
+import MuteEveryoneDialog from '../../../video-menu/components/web/MuteEveryoneDialog';
 import { close } from '../../actions.web';
 import {
     getParticipantsPaneOpen,
@@ -23,6 +21,7 @@ import {
     isMuteAllVisible
 } from '../../functions';
 import { AddBreakoutRoomButton } from '../breakout-rooms/components/web/AddBreakoutRoomButton';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { RoomList } from '../breakout-rooms/components/web/RoomList';
 

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import React from 'react';
 import { Text, View } from 'react-native';
 import { useSelector } from 'react-redux';

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

@@ -2,8 +2,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
-import Icon from '../../../base/icons/components/Icon';
-import { IconBurger } from '../../../base/icons/svg';
 // @ts-ignore
 import { Tooltip } from '../../../base/tooltip';
 import Button from '../../../base/ui/components/web/Button';
@@ -26,7 +24,6 @@ const PollCreate = ({
     addAnswer,
     answers,
     isSubmitDisabled,
-    moveAnswer,
     onSubmit,
     question,
     removeAnswer,
@@ -142,37 +139,6 @@ const PollCreate = ({
         }
     }, [ answers, addAnswer, removeAnswer, requestFocus ]);
 
-    const [ grabbing, setGrabbing ] = useState(null);
-
-    const interchangeHeights = (i: number, j: number) => {
-        const h = answerInputs.current[i].scrollHeight;
-
-        answerInputs.current[i].style.height = `${answerInputs.current[j].scrollHeight}px`;
-        answerInputs.current[j].style.height = `${h}px`;
-    };
-
-    const onGrab = useCallback((i, ev) => {
-        if (ev.button !== 0) {
-            return;
-        }
-        setGrabbing(i);
-        window.addEventListener('mouseup', () => {
-            setGrabbing(_grabbing => {
-                requestFocus(_grabbing);
-
-                return null;
-            });
-        }, { once: true });
-    }, []);
-
-    const onMouseOver = useCallback(i => {
-        if (grabbing !== null && grabbing !== i) {
-            interchangeHeights(i, grabbing);
-            moveAnswer(grabbing, i);
-            setGrabbing(i);
-        }
-    }, []);
-
     const autogrow = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
         const el = ev.target;
 
@@ -207,9 +173,8 @@ const PollCreate = ({
             <ol className = 'poll-answer-field-list'>
                 {answers.map((answer: any, i: number) =>
                     (<li
-                        className = { `poll-answer-field${grabbing === i ? ' poll-dragged' : ''}` }
-                        key = { i }
-                        onMouseOver = { () => onMouseOver(i) }>
+                        className = 'poll-answer-field'
+                        key = { i }>
                         <span className = 'poll-create-label'>
                             { t('polls.create.pollOption', { index: i + 1 })}
                         </span>
@@ -225,13 +190,6 @@ const PollCreate = ({
                                 required = { true }
                                 rows = { 1 }
                                 value = { answer } />
-                            <button
-                                className = 'poll-drag-handle'
-                                onMouseDown = { ev => onGrab(i, ev) }
-                                tabIndex = { -1 }
-                                type = 'button'>
-                                <Icon src = { IconBurger } />
-                            </button>
                         </div>
 
                         { answers.length > 2

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

@@ -1,5 +1,4 @@
 /* eslint-disable lines-around-comment */
-// @ts-ignore
 import React from 'react';
 
 import Button from '../../../base/ui/components/web/Button';

react/features/power-monitor/actions.ts

@@ -1,5 +1,4 @@
-// @flow
-
+// @ts-expect-error
 import { Transport } from '../../../modules/transport';
 
 import {
@@ -30,7 +29,7 @@ export function suspendDetected() {
  *      type: string
  *  }}
  */
-export function setTransport(transport: ?Transport) {
+export function setTransport(transport?: Transport) {
     return {
         type: SET_TRANSPORT,
         transport

react/features/power-monitor/middleware.ts

@@ -1,16 +1,11 @@
-// @flow
-
-
-import {
-    PostMessageTransportBackend,
-    Transport
-} from '../../../modules/transport';
+// @ts-expect-error
+import { PostMessageTransportBackend, Transport } from '../../../modules/transport';
 import {
     CONFERENCE_JOINED,
     CONFERENCE_LEFT
-} from '../base/conference';
-import { MiddlewareRegistry } from '../base/redux';
-import { destroyLocalTracks } from '../base/tracks';
+} from '../base/conference/actionTypes';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import { destroyLocalTracks } from '../base/tracks/actions';
 
 import { SUSPEND_DETECTED } from './actionTypes';
 import {
@@ -18,8 +13,6 @@ import {
     suspendDetected
 } from './actions';
 
-declare var APP: Object;
-
 MiddlewareRegistry.register(store => next => action => {
     const result = next(action);
     const { dispatch, getState } = store;
@@ -34,7 +27,7 @@ MiddlewareRegistry.register(store => next => action => {
             })
         });
 
-        transport.on('event', event => {
+        transport.on('event', (event: { event: string; name: string; }) => {
             if (event && event.name === 'power-monitor' && event.event === 'suspend') {
 
                 dispatch(suspendDetected());

react/features/prejoin/actions.web.ts

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import { v4 as uuidv4 } from 'uuid';
 
 import { IStore } from '../app/types';
@@ -17,6 +16,7 @@ import {
     getLocalVideoTrack
 } from '../base/tracks/functions';
 import { openURLInBrowser } from '../base/util/openURLInBrowser';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { executeDialOutRequest, executeDialOutStatusRequest, getDialInfoPageURL } from '../invite/functions';
 import { showErrorNotification } from '../notifications/actions';

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

@@ -1,5 +1,3 @@
-/* eslint-disable lines-around-comment */
-
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
@@ -9,6 +7,7 @@ import { Avatar } from '../../../../base/avatar';
 import { translate } from '../../../../base/i18n/functions';
 import Icon from '../../../../base/icons/components/Icon';
 import { IconCloseLarge } from '../../../../base/icons/svg';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import Label from '../Label';
 

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import { Theme } from '@mui/material';
 import { ClassNameMap, withStyles } from '@mui/styles';
 import clsx from 'clsx';
@@ -14,10 +13,10 @@ import { translate } from '../../../base/i18n/functions';
 import { raiseHand } from '../../../base/participants/actions';
 import { getLocalParticipant, hasRaisedHand } from '../../../base/participants/functions';
 import GifsMenu from '../../../gifs/components/web/GifsMenu';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import GifsMenuButton from '../../../gifs/components/web/GifsMenuButton';
 import { isGifEnabled, isGifsMenuOpen } from '../../../gifs/functions';
-// @ts-ignore
 import { dockToolbox } from '../../../toolbox/actions.web';
 import { addReactionToBuffer } from '../../actions.any';
 import { toggleReactionsMenuVisibility } from '../../actions.web';

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
 import { WithTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -8,6 +7,7 @@ import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n/functions';
 import { IconArrowUp } from '../../../base/icons/svg';
 import { connect } from '../../../base/redux/functions';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import ToolboxButtonWithIconPopup from '../../../base/toolbox/components/web/ToolboxButtonWithIconPopup';
 import { toggleReactionsMenuVisibility } from '../../actions.web';

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

@@ -14,11 +14,9 @@ import {
 } from '../../../base/dialog';
 // @ts-ignore
 import { StyleType } from '../../../base/styles';
-// @ts-ignore
-import { authorizeDropbox, updateDropboxToken } from '../../../dropbox';
+import { authorizeDropbox, updateDropboxToken } from '../../../dropbox/actions';
 import { isVpaasMeeting } from '../../../jaas/functions';
 import { RECORDING_TYPES } from '../../constants';
-// @ts-ignore
 import { supportsLocalRecording } from '../../functions';
 
 /**

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

@@ -7,8 +7,6 @@ import { getRoomName } from '../../../base/conference/functions';
 import { MEDIA_TYPE } from '../../../base/media/constants';
 import { getLocalTrack, getTrackState } from '../../../base/tracks/functions';
 import { inIframe } from '../../../base/util/iframeUtils';
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
 import { stopLocalVideoRecording } from '../../actions.any';
 
 interface ISelfRecording {

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import { Theme } from '@mui/material';
 import { withStyles } from '@mui/styles';
 import React from 'react';
@@ -11,14 +10,15 @@ import { IconHighlight } from '../../../../base/icons/svg';
 import { MEET_FEATURES } from '../../../../base/jwt/constants';
 import Label from '../../../../base/label/components/web/Label';
 import { connect } from '../../../../base/redux/functions';
+// eslint-disable-next-line lines-around-comment
 // @ts-ignore
 import { Tooltip } from '../../../../base/tooltip';
 import BaseTheme from '../../../../base/ui/components/BaseTheme.web';
-// @ts-ignore
 import { maybeShowPremiumFeatureDialog } from '../../../../jaas/actions';
 import AbstractHighlightButton, {
     type Props as AbstractProps,
     _abstractMapStateToProps
+
     // @ts-ignore
 } from '../AbstractHighlightButton';
 
@@ -193,6 +193,7 @@ export class HighlightButton extends AbstractHighlightButton<Props, IState> {
             _visible,
             classes,
             t
+
             // @ts-ignore
         } = this.props;
 

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

@@ -14,7 +14,6 @@ import Button from '../../../../base/ui/components/web/Button';
 import Switch from '../../../../base/ui/components/web/Switch';
 import { BUTTON_TYPES } from '../../../../base/ui/constants.web';
 import { RECORDING_TYPES } from '../../../constants';
-// @ts-ignore
 import { getRecordingDurationEstimation } from '../../../functions';
 import AbstractStartRecordingDialogContent, {
     IProps,

react/features/remote-control/actions.ts

@@ -1,17 +1,20 @@
-// @flow
-
+// @ts-ignore
 import $ from 'jquery';
+import React from 'react';
 
-import { openDialog } from '../base/dialog';
+import { IStore } from '../app/types';
+import { openDialog } from '../base/dialog/actions';
 import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
+import { pinParticipant } from '../base/participants/actions';
 import {
     getParticipantDisplayName,
     getPinnedParticipant,
-    getVirtualScreenshareParticipantByOwnerId,
-    pinParticipant
-} from '../base/participants';
-import { getLocalDesktopTrack, toggleScreensharing } from '../base/tracks';
-import { NOTIFICATION_TIMEOUT_TYPE, showNotification } from '../notifications';
+    getVirtualScreenshareParticipantByOwnerId
+} from '../base/participants/functions';
+import { toggleScreensharing } from '../base/tracks/actions';
+import { getLocalDesktopTrack } from '../base/tracks/functions';
+import { showNotification } from '../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
 import { isScreenVideoShared } from '../screen-share/functions';
 
 import {
@@ -23,6 +26,8 @@ import {
     SET_RECEIVER_TRANSPORT,
     SET_REQUESTED_PARTICIPANT
 } from './actionTypes';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
 import { RemoteControlAuthorizationDialog } from './components';
 import {
     DISCO_REMOTE_CONTROL_FEATURE,
@@ -43,9 +48,8 @@ import logger from './logger';
 /**
  * Listeners.
  */
-let permissionsReplyListener, receiverEndpointMessageListener, stopListener;
-
-declare var APP: Object;
+let permissionsReplyListener: Function | undefined,
+    receiverEndpointMessageListener: Function, stopListener: Function | undefined;
 
 /**
  * Signals that the remote control authorization dialog should be displayed.
@@ -72,7 +76,7 @@ export function openRemoteControlAuthorizationDialog(participantId: string) {
  * @returns {Function}
  */
 export function setRemoteControlActive(active: boolean) {
-    return (dispatch: Function, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { active: oldActive } = state['features/remote-control'];
         const { conference } = state['features/base/conference'];
@@ -82,7 +86,7 @@ export function setRemoteControlActive(active: boolean) {
                 type: REMOTE_CONTROL_ACTIVE,
                 active
             });
-            conference.setLocalParticipantProperty('remoteControlSessionStatus', active);
+            conference?.setLocalParticipantProperty('remoteControlSessionStatus', active);
         }
     };
 }
@@ -95,7 +99,7 @@ export function setRemoteControlActive(active: boolean) {
  * @returns {Function}
  */
 export function requestRemoteControl(userId: string) {
-    return (dispatch: Function, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const enabled = isRemoteControlEnabled(state);
 
@@ -110,11 +114,11 @@ export function requestRemoteControl(userId: string) {
         const { conference } = state['features/base/conference'];
 
 
-        permissionsReplyListener = (participant, event) => {
+        permissionsReplyListener = (participant: any, event: any) => {
             dispatch(processPermissionRequestReply(participant.getId(), event));
         };
 
-        conference.on(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, permissionsReplyListener);
+        conference?.on(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, permissionsReplyListener);
 
         dispatch({
             type: SET_REQUESTED_PARTICIPANT,
@@ -140,8 +144,8 @@ export function requestRemoteControl(userId: string) {
  * @param {EndpointMessage} event - The permission request event.
  * @returns {Function}
  */
-export function processPermissionRequestReply(participantId: string, event: Object) {
-    return (dispatch: Function, getState: Function) => {
+export function processPermissionRequestReply(participantId: string, event: any) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { action, name, type } = event;
         const { requestedParticipant } = state['features/remote-control'].controller;
@@ -162,11 +166,11 @@ export function processPermissionRequestReply(participantId: string, event: Obje
 
                 const { conference } = state['features/base/conference'];
 
-                stopListener = (participant, stopEvent) => {
+                stopListener = (participant: any, stopEvent: { name: string; type: string; }) => {
                     dispatch(handleRemoteControlStoppedEvent(participant.getId(), stopEvent));
                 };
 
-                conference.on(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, stopListener);
+                conference?.on(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, stopListener);
 
                 dispatch(resume());
 
@@ -206,7 +210,9 @@ export function processPermissionRequestReply(participantId: string, event: Obje
                 const virtualScreenshareParticipantId = getVirtualScreenshareParticipantByOwnerId(state, participantId);
                 const pinnedId = pinnedParticipant?.id;
 
+                // @ts-ignore
                 if (virtualScreenshareParticipantId && pinnedId !== virtualScreenshareParticipantId) {
+                    // @ts-ignore
                     dispatch(pinParticipant(virtualScreenshareParticipantId));
                 } else if (!virtualScreenshareParticipantId && pinnedId !== participantId) {
                     dispatch(pinParticipant(participantId));
@@ -226,7 +232,7 @@ export function processPermissionRequestReply(participantId: string, event: Obje
  * @property {string} type - The function process only events with name REMOTE_CONTROL_MESSAGE_NAME.
  * @returns {void}
  */
-export function handleRemoteControlStoppedEvent(participantId: Object, event: Object) {
+export function handleRemoteControlStoppedEvent(participantId: Object, event: { name: string; type: string; }) {
     return (dispatch: Function, getState: Function) => {
         const state = getState();
         const { name, type } = event;
@@ -246,8 +252,8 @@ export function handleRemoteControlStoppedEvent(participantId: Object, event: Ob
  * @param {boolean} notifyRemoteParty - If true a endpoint message to the controlled participant will be sent.
  * @returns {void}
  */
-export function stopController(notifyRemoteParty: boolean = false) {
-    return (dispatch: Function, getState: Function) => {
+export function stopController(notifyRemoteParty = false) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { controlled } = state['features/remote-control'].controller;
 
@@ -265,7 +271,7 @@ export function stopController(notifyRemoteParty: boolean = false) {
 
         logger.log('Stopping remote control controller.');
 
-        conference.off(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, stopListener);
+        conference?.off(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, stopListener);
         stopListener = undefined;
 
         dispatch(pause());
@@ -289,7 +295,7 @@ export function stopController(notifyRemoteParty: boolean = false) {
  * @returns {Function}
  */
 export function clearRequest() {
-    return (dispatch: Function, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const { conference } = getState()['features/base/conference'];
 
         dispatch({
@@ -297,7 +303,7 @@ export function clearRequest() {
             requestedParticipant: undefined
         });
 
-        conference.off(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, permissionsReplyListener);
+        conference?.off(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, permissionsReplyListener);
         permissionsReplyListener = undefined;
     };
 }
@@ -313,7 +319,7 @@ export function clearRequest() {
  *      transport: Transport
  * }}
  */
-export function setReceiverTransport(transport: Object) {
+export function setReceiverTransport(transport?: Object) {
     return {
         type: SET_RECEIVER_TRANSPORT,
         transport
@@ -326,7 +332,7 @@ export function setReceiverTransport(transport: Object) {
  * @returns {Function}
  */
 export function enableReceiver() {
-    return (dispatch: Function, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { enabled } = state['features/remote-control'].receiver;
 
@@ -349,7 +355,8 @@ export function enableReceiver() {
         });
 
         connection.addFeature(DISCO_REMOTE_CONTROL_FEATURE, true);
-        receiverEndpointMessageListener = (participant, message) => {
+        receiverEndpointMessageListener = (participant: any, message: {
+            action: string; name: string; type: string; }) => {
             dispatch(endpointMessageReceived(participant.getId(), message));
         };
         conference.on(JitsiConferenceEvents.ENDPOINT_MESSAGE_RECEIVED, receiverEndpointMessageListener);
@@ -401,7 +408,7 @@ export function disableReceiver() {
  * @param {boolean} [dontNotifyRemoteParty] - If true a endpoint message to the controller participant will be sent.
  * @returns {Function}
  */
-export function stopReceiver(dontNotifyLocalParty: boolean = false, dontNotifyRemoteParty: boolean = false) {
+export function stopReceiver(dontNotifyLocalParty = false, dontNotifyRemoteParty = false) {
     return (dispatch: Function, getState: Function) => {
         const state = getState();
         const { receiver } = state['features/remote-control'];
@@ -450,8 +457,9 @@ export function stopReceiver(dontNotifyLocalParty: boolean = false, dontNotifyRe
  * name REMOTE_CONTROL_MESSAGE_NAME.
  * @returns {Function}
  */
-export function endpointMessageReceived(participantId: string, message: Object) {
-    return (dispatch: Function, getState: Function) => {
+export function endpointMessageReceived(participantId: string, message: {
+    action: string; name: string; type: string; }) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const { action, name, type } = message;
 
         if (name !== REMOTE_CONTROL_MESSAGE_NAME) {
@@ -472,7 +480,7 @@ export function endpointMessageReceived(participantId: string, message: Object)
                 if (type === EVENTS.stop) {
                     dispatch(stopReceiver(false, true));
                 } else { // forward the message
-                    transport.sendEvent(message);
+                    transport?.sendEvent(message);
                 }
             } // else ignore
         } else {
@@ -489,7 +497,7 @@ export function endpointMessageReceived(participantId: string, message: Object)
  * @returns {Function}
  */
 export function deny(participantId: string) {
-    return (dispatch: Function, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { conference } = state['features/base/conference'];
 
@@ -507,7 +515,7 @@ export function deny(participantId: string) {
  * @returns {Function}
  */
 export function sendStartRequest() {
-    return (dispatch: Function, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const tracks = state['features/base/tracks'];
         const track = getLocalDesktopTrack(tracks);
@@ -518,7 +526,7 @@ export function sendStartRequest() {
             return Promise.reject(new Error('Cannot identify screen for the remote control session'));
         }
 
-        return transport.sendRequest({
+        return transport?.sendRequest({
             name: REMOTE_CONTROL_MESSAGE_NAME,
             type: REQUESTS.start,
             sourceId
@@ -534,7 +542,7 @@ export function sendStartRequest() {
  * @returns {Function}
  */
 export function grant(participantId: string) {
-    return (dispatch: Function, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         dispatch({
             type: SET_CONTROLLER,
             controller: participantId
@@ -555,7 +563,7 @@ export function grant(participantId: string) {
                 true,
                 false,
                 { desktopSharingSources: [ 'screen' ] }
-            ))
+            )) // @ts-ignore
             .then(() => dispatch(sendStartRequest()));
         }
 
@@ -566,7 +574,7 @@ export function grant(participantId: string) {
                 type: EVENTS.permissions,
                 action: PERMISSIONS_ACTIONS.grant
             }))
-            .catch(error => {
+            .catch((error: any) => {
                 logger.error(error);
 
                 sendRemoteControlEndpointMessage(conference, participantId, {
@@ -591,14 +599,16 @@ export function grant(participantId: string) {
  * @param {Event} event - The mouse event.
  * @returns {Function}
  */
-export function mouseClicked(type: string, event: Object) {
-    return (dispatch: Function, getState: Function) => {
+export function mouseClicked(type: string, event: React.MouseEvent) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { conference } = state['features/base/conference'];
         const { controller } = state['features/remote-control'];
 
         sendRemoteControlEndpointMessage(conference, controller.controlled, {
             type,
+
+            // @ts-ignore
             button: event.which
         });
     };
@@ -610,8 +620,8 @@ export function mouseClicked(type: string, event: Object) {
  * @param {Event} event - The mouse event.
  * @returns {Function}
  */
-export function mouseMoved(event: Object) {
-    return (dispatch: Function, getState: Function) => {
+export function mouseMoved(event: React.MouseEvent) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const area = getRemoteConrolEventCaptureArea();
 
         if (!area) {
@@ -637,8 +647,8 @@ export function mouseMoved(event: Object) {
  * @param {Event} event - The mouse event.
  * @returns {Function}
  */
-export function mouseScrolled(event: Object) {
-    return (dispatch: Function, getState: Function) => {
+export function mouseScrolled(event: { deltaX: number; deltaY: number; }) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { conference } = state['features/base/conference'];
         const { controller } = state['features/remote-control'];
@@ -658,8 +668,8 @@ export function mouseScrolled(event: Object) {
  * @param {Event} event - The key event.
  * @returns {Function}
  */
-export function keyPressed(type: string, event: Object) {
-    return (dispatch: Function, getState: Function) => {
+export function keyPressed(type: string, event: React.KeyboardEvent) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { conference } = state['features/base/conference'];
         const { controller } = state['features/remote-control'];
@@ -680,7 +690,7 @@ export function keyPressed(type: string, event: Object) {
 * @returns {Function}
 */
 export function resume() {
-    return (dispatch: Function, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const area = getRemoteConrolEventCaptureArea();
         const state = getState();
         const { controller } = state['features/remote-control'];
@@ -695,22 +705,22 @@ export function resume() {
         // FIXME: Once the keyboard shortcuts are using react/redux.
         APP.keyboardshortcut.enable(false);
 
-        area.mousemove(event => {
+        area.mousemove((event: React.MouseEvent) => {
             dispatch(mouseMoved(event));
         });
-        area.mousedown(event => dispatch(mouseClicked(EVENTS.mousedown, event)));
-        area.mouseup(event => dispatch(mouseClicked(EVENTS.mouseup, event)));
-        area.dblclick(event => dispatch(mouseClicked(EVENTS.mousedblclick, event)));
+        area.mousedown((event: React.MouseEvent) => dispatch(mouseClicked(EVENTS.mousedown, event)));
+        area.mouseup((event: React.MouseEvent) => dispatch(mouseClicked(EVENTS.mouseup, event)));
+        area.dblclick((event: React.MouseEvent) => dispatch(mouseClicked(EVENTS.mousedblclick, event)));
         area.contextmenu(() => false);
-        area[0].onwheel = event => {
+        area[0].onwheel = (event: any) => {
             event.preventDefault();
             event.stopPropagation();
             dispatch(mouseScrolled(event));
 
             return false;
         };
-        $(window).keydown(event => dispatch(keyPressed(EVENTS.keydown, event)));
-        $(window).keyup(event => dispatch(keyPressed(EVENTS.keyup, event)));
+        $(window).keydown((event: React.KeyboardEvent) => dispatch(keyPressed(EVENTS.keydown, event)));
+        $(window).keyup((event: React.KeyboardEvent) => dispatch(keyPressed(EVENTS.keyup, event)));
 
         dispatch({
             type: CAPTURE_EVENTS,
@@ -730,7 +740,7 @@ export function resume() {
  * @returns {Function}
  */
 export function pause() {
-    return (dispatch: Function, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { controller } = state['features/remote-control'];
         const { controlled, isCapturingEvents } = controller;