ref(TS) Convert some features to TS (#12523)

react/features/app/functions.native.ts

 
 import { IStateful } from '../base/app/types';
 import { toState } from '../base/redux/functions';
-import { getServerURL } from '../base/settings/functions';
+import { getServerURL } from '../base/settings/functions.native';
 
 export * from './functions.any';
 

react/features/authentication/actions.native.js → react/features/authentication/actions.native.ts

-// @flow
-
-import type { Dispatch } from 'redux';
-
 import { appNavigate } from '../app/actions';
+import { IStore } from '../app/types';
 import { conferenceLeft } from '../base/conference/actions';
 import { connectionFailed } from '../base/connection/actions.native';
-import { set } from '../base/redux';
+import { set } from '../base/redux/functions';
 
 import { CANCEL_LOGIN } from './actionTypes';
 import { stopWaitForOwner } from './actions.any';
  * }}
  */
 export function cancelLogin() {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         dispatch({ type: CANCEL_LOGIN });
 
         // XXX The error associated with CONNECTION_FAILED was marked as
         passwordRequired
             && dispatch(
                 connectionFailed(
-                    passwordRequired,
-                    set(error, 'recoverable', false)));
+                    passwordRequired, // @ts-ignore
+                    set(error, 'recoverable', false) as any));
     };
 }
 
  * @returns {Function}
  */
 export function cancelWaitForOwner() {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         dispatch(stopWaitForOwner());
 
         // XXX The error associated with CONFERENCE_FAILED was marked as

react/features/authentication/functions.js → react/features/authentication/functions.ts

-// @flow
-
-import JitsiMeetJS from '../../../react/features/base/lib-jitsi-meet';
+import { IConfig } from '../base/config/configType';
+import JitsiMeetJS from '../base/lib-jitsi-meet';
 
 
 /**
  * @param {Object} config - Configuration state object from store.
  * @returns {boolean}
  */
-export const isTokenAuthEnabled = (config: Object) =>
+export const isTokenAuthEnabled = (config: IConfig) =>
     typeof config.tokenAuthUrl === 'string'
     && config.tokenAuthUrl.length;
 
  * @param {Object} config - Configuration state object from store.
  * @returns {string}
  */
-export const getTokenAuthUrl = (config: Object) =>
+export const getTokenAuthUrl = (config: IConfig) =>
     JitsiMeetJS.util.AuthUtil.getTokenAuthUrl.bind(null,
-         config.tokenAuthUrl);
+        config.tokenAuthUrl);

react/features/authentication/middleware.native.js → react/features/authentication/middleware.native.ts

-// @flow
-
-import type { Dispatch } from 'redux';
-
-import { appNavigate } from '../app/actions';
+import { appNavigate } from '../app/actions.native';
+import { IStore } from '../app/types';
 import {
     CONFERENCE_FAILED,
     CONFERENCE_JOINED,
     CONFERENCE_LEFT
-} from '../base/conference';
-import { CONNECTION_ESTABLISHED, CONNECTION_FAILED } from '../base/connection';
-import { hideDialog, isDialogOpen } from '../base/dialog';
+} from '../base/conference/actionTypes';
+import { CONNECTION_ESTABLISHED, CONNECTION_FAILED } from '../base/connection/actionTypes';
+import { hideDialog } from '../base/dialog/actions';
+import { isDialogOpen } from '../base/dialog/functions';
 import {
     JitsiConferenceErrors,
     JitsiConnectionErrors
 } from '../base/lib-jitsi-meet';
-import { MiddlewareRegistry } from '../base/redux';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 
 import {
     CANCEL_LOGIN,
     openLoginDialog,
     openWaitForOwnerDialog,
     stopWaitForOwner,
-    waitForOwner } from './actions.native';
+    waitForOwner } from './actions.native'; // @ts-ignore
 import { LoginDialog, WaitForOwnerDialog } from './components';
 
 /**
         const { dispatch, getState } = store;
         const { thenableWithCancel } = getState()['features/authentication'];
 
-        thenableWithCancel && thenableWithCancel.cancel();
+        thenableWithCancel?.cancel();
 
         // The LoginDialog can be opened on top of "wait for owner". The app
         // should navigate only if LoginDialog was open without the
     case WAIT_FOR_OWNER: {
         _clearExistingWaitForOwnerTimeout(store);
 
-        const { handler, timeoutMs } = action;
+        const { handler, timeoutMs }: { handler: () => void; timeoutMs: number; } = action;
 
         action.waitForOwnerTimeoutID = setTimeout(handler, timeoutMs);
 
  * @returns {void}
  */
 function _clearExistingWaitForOwnerTimeout(
-        { getState }: { getState: Function }) {
+        { getState }: IStore) {
     const { waitForOwnerTimeoutID } = getState()['features/authentication'];
 
     waitForOwnerTimeoutID && clearTimeout(waitForOwnerTimeoutID);
  * @param {Object} store - The redux store.
  * @returns {void}
  */
-function _hideLoginDialog({ dispatch }: { dispatch: Dispatch<any> }) {
+function _hideLoginDialog({ dispatch }: IStore) {
     dispatch(hideDialog(LoginDialog));
 }
 
  * @param {Object} store - The redux store.
  * @returns {boolean}
  */
-function _isWaitingForOwner({ getState }: { getState: Function }) {
+function _isWaitingForOwner({ getState }: IStore) {
     return Boolean(getState()['features/authentication'].waitForOwnerTimeoutID);
 }

react/features/authentication/middleware.web.js → react/features/authentication/middleware.web.ts

-// @flow
-
-import { maybeRedirectToWelcomePage } from '../app/actions';
+import { maybeRedirectToWelcomePage } from '../app/actions.web';
+import { IStore } from '../app/types';
 import {
     CONFERENCE_FAILED,
     CONFERENCE_JOINED,
     CONFERENCE_LEFT
-} from '../base/conference';
-import { CONNECTION_ESTABLISHED } from '../base/connection';
-import { hideDialog, isDialogOpen } from '../base/dialog';
+} from '../base/conference/actionTypes';
+import { CONNECTION_ESTABLISHED } from '../base/connection/actionTypes';
+import { hideDialog } from '../base/dialog/actions';
+import { isDialogOpen } from '../base/dialog/functions';
 import {
     JitsiConferenceErrors
 } from '../base/lib-jitsi-meet';
-import { MiddlewareRegistry } from '../base/redux';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 
 import {
     CANCEL_LOGIN,
     openWaitForOwnerDialog,
     stopWaitForOwner
 } from './actions.web';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
 import { LoginDialog, WaitForOwnerDialog } from './components';
 
 /**
     case WAIT_FOR_OWNER: {
         _clearExistingWaitForOwnerTimeout(store);
 
-        const { handler, timeoutMs } = action;
+        const { handler, timeoutMs }: { handler: () => void; timeoutMs: number; } = action;
 
         action.waitForOwnerTimeoutID = setTimeout(handler, timeoutMs);
 
  * @returns {void}
  */
 function _clearExistingWaitForOwnerTimeout(
-        { getState }: { getState: Function }) {
+        { getState }: IStore) {
     const { waitForOwnerTimeoutID } = getState()['features/authentication'];
 
     waitForOwnerTimeoutID && clearTimeout(waitForOwnerTimeoutID);
  * @param {Object} store - The redux store.
  * @returns {void}
  */
-function _isWaitingForOwner({ getState }: { getState: Function }) {
+function _isWaitingForOwner({ getState }: IStore) {
     return getState()['features/authentication'].waitForOwnerTimeoutID;
 }

react/features/authentication/reducer.ts

 export interface IAuthenticationState {
     error?: Object | undefined;
     progress?: number | undefined;
-    thenableWithCancel?: Object | undefined;
+    thenableWithCancel?: {
+        cancel: Function;
+    };
     waitForOwnerTimeoutID?: number;
 }
 

react/features/base/conference/actions.ts

  *     conference: JitsiConference
  * }}
  */
-export function conferenceLeft(conference: IJitsiConference) {
+export function conferenceLeft(conference: Partial<IJitsiConference>) {
     return {
         type: CONFERENCE_LEFT,
         conference

react/features/base/config/configType.ts

     tileView?: {
         numberOfVisibleTiles?: number;
     };
+    tokenAuthUrl?: string;
     toolbarButtons?: Array<ToolbarButtons>;
     toolbarConfig?: {
         alwaysVisible?: boolean;

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

 }
 
 /* eslint-enable max-params */
+
+/**
+ * Returns the dial out url.
+ *
+ * @param {Object} state - The state of the app.
+ * @returns {string}
+ */
+export function getDialOutStatusUrl(state: IReduxState) {
+    return state['features/base/config'].guestDialOutStatusUrl;
+}
+
+/**
+ * Returns the dial out status url.
+ *
+ * @param {Object} state - The state of the app.
+ * @returns {string}
+ */
+export function getDialOutUrl(state: IReduxState) {
+    return state['features/base/config'].guestDialOutUrl;
+}

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

 export function _cleanupConfig(config: IConfig) { // eslint-disable-line @typescript-eslint/no-unused-vars
 }
 
-/**
- * Returns the dial out url.
- *
- * @param {Object} state - The state of the app.
- * @returns {string}
- */
-export function getDialOutStatusUrl(state: IReduxState): string | undefined {
-    return state['features/base/config'].guestDialOutStatusUrl;
-}
-
-/**
- * Returns the dial out status url.
- *
- * @param {Object} state - The state of the app.
- * @returns {string}
- */
-export function getDialOutUrl(state: IReduxState): string | undefined {
-    return state['features/base/config'].guestDialOutUrl;
-}
-
 /**
  * Returns the replaceParticipant config.
  *

react/features/base/environment/environment.ts

 import JitsiMeetJS from '../lib-jitsi-meet';
-import Platform from '../react/Platform.web';
+import Platform from '../react/Platform';
 
 import { isMobileBrowser } from './utils';
 

react/features/base/media/functions.ts

 import { IStateful } from '../app/types';
 import { toState } from '../redux/functions';
-import { getPropertyValue } from '../settings/functions.any';
+import { getPropertyValue } from '../settings/functions';
 
 import { VIDEO_MUTISM_AUTHORITY } from './constants';
 

react/features/base/participants/actions.ts

  *     }
  * }}
  */
-export function pinParticipant(id: string | null) {
+export function pinParticipant(id?: string | null) {
     return {
         type: PIN_PARTICIPANT,
         participant: {

react/features/conference/actions.native.js → react/features/conference/actions.native.ts

-// @flow
-
-import type { Dispatch } from 'redux';
-
-import {
-    AlertDialog,
-    openDialog
-} from '../base/dialog';
-import { getParticipantDisplayName } from '../base/participants';
+import { IStore } from '../app/types';
+import { openDialog } from '../base/dialog/actions';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
+import { AlertDialog } from '../base/dialog/components/native';
+import { getParticipantDisplayName } from '../base/participants/functions';
 
 /**
  * Notify that we've been kicked out of the conference.
  * @param {?Function} submit - The function to execute after submiting the dialog.
  * @returns {Function}
  */
-export function notifyKickedOut(participant: Object, submit: ?Function) {
-    return (dispatch: Dispatch<any>, getState: Function) => {
-        if (!participant || (participant.isReplaced && participant.isReplaced())) {
-            submit && submit();
+export function notifyKickedOut(participant: any, submit?: Function) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        if (!participant || participant?.isReplaced?.()) {
+            submit?.();
 
             return;
         }

react/features/conference/actions.web.js → react/features/conference/actions.web.ts

-// @flow
-
-import type { Dispatch } from 'redux';
-
-import { getParticipantDisplayName } from '../base/participants';
-import {
-    NOTIFICATION_TIMEOUT_TYPE,
-    NOTIFICATION_TYPE,
-    showNotification
-} from '../notifications';
+import { IStore } from '../app/types';
+import { getParticipantDisplayName } from '../base/participants/functions';
+import { showNotification } from '../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE, NOTIFICATION_TYPE } from '../notifications/constants';
 
 /**
  * Notify that we've been kicked out of the conference.
  * @param {?Function} _ - Used only in native code.
  * @returns {Function}
  */
-export function notifyKickedOut(participant: Object, _: ?Function) { // eslint-disable-line no-unused-vars
-    return (dispatch: Dispatch<any>, getState: Function) => {
-        if (!participant || (participant.isReplaced && participant.isReplaced())) {
+export function notifyKickedOut(participant: any, _?: Function) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        if (!participant || participant?.isReplaced()) {
             return;
         }
 

react/features/conference/functions.any.js → react/features/conference/functions.any.ts

-import { toState } from '../base/redux';
-import { areThereNotifications } from '../notifications';
-import { getOverlayToRender } from '../overlay';
+import { IStateful } from '../base/app/types';
+import { toState } from '../base/redux/functions';
+import { areThereNotifications } from '../notifications/functions';
+import { getOverlayToRender } from '../overlay/functions';
 
 /**
  * Tells whether or not the notifications should be displayed within
  * @param {Object|Function} stateful - The redux store state.
  * @returns {boolean}
  */
-export function shouldDisplayNotifications(stateful) {
+export function shouldDisplayNotifications(stateful: IStateful) {
     const state = toState(stateful);
     const isAnyOverlayVisible = Boolean(getOverlayToRender(state));
     const { calleeInfoVisible } = state['features/invite'];

react/features/conference/functions.native.js → react/features/conference/functions.native.ts

-// @flow
-
-import { toState } from '../base/redux';
+import { IStateful } from '../base/app/types';
+import { toState } from '../base/redux/functions';
 
 export * from './functions.any';
 
  * features/base/config.
  * @returns {boolean}.
  */
-export function getDisablePolls(stateful: Object) {
+export function getDisablePolls(stateful: IStateful) {
     const state = toState(stateful)['features/base/config'];
 
     return state.disablePolls;

react/features/conference/functions.web.js → react/features/conference/functions.web.ts

-import { isSuboptimalBrowser } from '../base/environment';
-import { translateToHTML } from '../base/i18n';
-import { NOTIFICATION_TIMEOUT_TYPE, showWarningNotification } from '../notifications';
+import { IStore } from '../app/types';
+import { isSuboptimalBrowser } from '../base/environment/environment';
+import { translateToHTML } from '../base/i18n/functions';
+import { showWarningNotification } from '../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
 
 export * from './functions.any';
 
  * @param {Function} t - The translation function.
  * @returns {void}
  */
-export function maybeShowSuboptimalExperienceNotification(dispatch, t) {
+export function maybeShowSuboptimalExperienceNotification(dispatch: IStore['dispatch'], t: Function) {
     if (isSuboptimalBrowser()) {
         dispatch(
             showWarningNotification(

react/features/conference/logger.js → react/features/conference/logger.ts

-// @flow
-
 import { getLogger } from '../base/logging/functions';
 
 export default getLogger('features/conference');

react/features/conference/middleware.js → react/features/conference/middleware.ts

-// @flow
 import { appNavigate } from '../app/actions';
-import {
-    CONFERENCE_JOINED,
-    KICKED_OUT,
-    conferenceLeft,
-    getCurrentConference
-} from '../base/conference';
-import { hideDialog, isDialogOpen } from '../base/dialog';
-import { pinParticipant } from '../base/participants';
-import { MiddlewareRegistry, StateListenerRegistry } from '../base/redux';
-import { SET_REDUCED_UI } from '../base/responsive-ui';
+import { IStore } from '../app/types';
+import { CONFERENCE_JOINED, KICKED_OUT } from '../base/conference/actionTypes';
+import { conferenceLeft } from '../base/conference/actions';
+import { getCurrentConference } from '../base/conference/functions';
+import { hideDialog } from '../base/dialog/actions';
+import { isDialogOpen } from '../base/dialog/functions';
+import { pinParticipant } from '../base/participants/actions';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import StateListenerRegistry from '../base/redux/StateListenerRegistry';
+import { SET_REDUCED_UI } from '../base/responsive-ui/actionTypes';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
 import { FeedbackDialog } from '../feedback';
-import { setFilmstripEnabled } from '../filmstrip';
+import { setFilmstripEnabled } from '../filmstrip/actions';
 import { showSalesforceNotification } from '../salesforce/actions';
 import { setToolboxEnabled } from '../toolbox/actions';
 
  * @private
  * @returns {void}
  */
-function _setReducedUI({ dispatch, getState }) {
+function _setReducedUI({ dispatch, getState }: IStore) {
     const { reducedUI } = getState()['features/base/responsive-ui'];
 
     dispatch(setToolboxEnabled(!reducedUI));
  * @private
  * @returns {void}
  */
-function _conferenceJoined({ dispatch, getState }) {
+function _conferenceJoined({ dispatch, getState }: IStore) {
     _setReducedUI({
         dispatch,
         getState

react/features/connection-indicator/functions.ts

  * @param {Object} videoTrack - Track reference.
  * @returns {boolean} - Is streaming status active.
  */
-export function isTrackStreamingStatusActive(videoTrack: ITrack) {
+export function isTrackStreamingStatusActive(videoTrack?: ITrack) {
     const streamingStatus = videoTrack?.streamingStatus;
 
     return streamingStatus === JitsiTrackStreamingStatus.ACTIVE;

react/features/dropbox/actions.js → react/features/dropbox/actions.ts

-// @flow
 import { UPDATE_DROPBOX_TOKEN } from './actionTypes';
 import { _authorizeDropbox } from './functions';
 import logger from './logger';

react/features/dropbox/functions.any.js → react/features/dropbox/functions.any.ts

-// @flow
 export * from './functions';
 
 import { getDisplayName, getSpaceUsage } from './functions';
     /**
      * The available space left in MB into the user's Dropbox account.
      */
-    spaceLeft: number,
+    spaceLeft: number;
 
     /**
      * The display name of the user in Dropbox.
      */
-    userName: string
+    userName: string;
 };
 
 /**
 export function getDropboxData(
         token: string,
         appKey: string
-): Promise<?DropboxUserData> {
+): Promise<DropboxUserData | undefined> {
     return Promise.all(
         [ getDisplayName(token, appKey), getSpaceUsage(token, appKey) ]
     ).then(([ userName, space ]) => {

react/features/dropbox/functions.native.js → react/features/dropbox/functions.native.ts

-// @flow
-
 import { NativeModules } from 'react-native';
 
-const { Dropbox } = NativeModules;
-
+import { IReduxState } from '../app/types';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
 import { setPictureInPictureEnabled } from '../mobile/picture-in-picture/functions';
 
+const { Dropbox } = NativeModules;
+
 /**
  * Action to authorize the Jitsi Recording app in dropbox.
  *
+ * @param {any} _appKey - Used on web.
+ * @param {any} _redirectURI - Used on web.
  * @returns {Promise<Object>} - The promise will be resolved with the dropbox
  * access token or rejected with an error.
  */
-export async function _authorizeDropbox(): Promise<Object> {
+export async function _authorizeDropbox(_appKey?: any, _redirectURI?: any): Promise<any> {
     setPictureInPictureEnabled(false);
 
     try {
  * Returns the display name for the current dropbox account.
  *
  * @param {string} token - The dropbox access token.
+ * @param {any} _appKey - Used on web.
  * @returns {Promise<string>} - The promise will be resolved with the display
  * name or rejected with an error.
  */
-export function getDisplayName(token: string) {
+export function getDisplayName(token: string, _appKey?: any) {
     return Dropbox.getDisplayName(token);
 }
 
  * Returns information about the space usage for the current dropbox account.
  *
  * @param {string} token - The dropbox access token.
+ * @param {any} _appKey - Used on web.
  * @returns {Promise<{ used: number, allocated: number}>} - The promise will be
  * resolved with the object with information about the space usage (the used
  * space and the allocated space) for the current dropbox account or rejected
  * with an error.
  */
-export function getSpaceUsage(token: string) {
+export function getSpaceUsage(token: string, _appKey?: any) {
     return Dropbox.getSpaceUsage(token);
 }
 
  * @param {Object} state - The redux state.
  * @returns {boolean}
  */
-export function isEnabled(state: Object) {
+export function isEnabled(state: IReduxState) {
     const { dropbox = {} } = state['features/base/config'];
 
+    // @ts-ignore
     return Boolean(Dropbox?.ENABLED && typeof dropbox.appKey === 'string');
 }

react/features/dropbox/functions.web.js → react/features/dropbox/functions.web.ts

-// @flow
-
 import { Dropbox, DropboxAuth } from 'dropbox';
 
+import { IReduxState } from '../app/types';
+
 /**
  * Executes the oauth flow.
  *
 
     return new Promise(resolve => {
         // eslint-disable-next-line prefer-const
-        let popup;
-        const handleAuth = ({ data }) => {
+        let popup: any;
+        const handleAuth = ({ data }: { data: { type: string; url: string; windowName: string; }; }) => {
             if (data && data.type === 'dropbox-login' && data.windowName === windowName) {
                 if (popup) {
                     popup.close();
 export function _authorizeDropbox(
         appKey: string,
         redirectURI: string
-): Promise<Object> {
+): Promise<any> {
     const dropbox = new DropboxAuth({ clientId: appKey });
 
     return dropbox.getAuthenticationUrl(redirectURI, undefined, 'code', 'offline', undefined, undefined, true)
+
+        // @ts-ignore
         .then(authorize)
         .then(returnUrl => {
             const params = new URLSearchParams(new URL(returnUrl).search);
             const code = params.get('code');
 
-            return dropbox.getAccessTokenFromCode(redirectURI, code);
+            return dropbox.getAccessTokenFromCode(redirectURI, code ?? '');
         })
-        .then(resp => {
+        .then((resp: any) => {
             return {
                 token: resp.result.access_token,
                 rToken: resp.result.refresh_token,
 
     dropbox.setRefreshToken(rToken);
 
-    return dropbox.refreshAccessToken()
+    return dropbox.refreshAccessToken() // @ts-ignore
         .then(() => {
             return {
                 token: dropbox.getAccessToken(),
 
     return dropboxAPI.usersGetSpaceUsage().then(space => {
         const { allocation, used } = space.result;
+
+        // @ts-ignore
         const { allocated } = allocation;
 
         return {
  * @param {Object} state - The redux state.
  * @returns {boolean}
  */
-export function isEnabled(state: Object) {
+export function isEnabled(state: IReduxState) {
     const { dropbox = {} } = state['features/base/config'];
 
+    // @ts-ignore
     return typeof dropbox.appKey === 'string';
 }

react/features/dropbox/logger.js → react/features/dropbox/logger.ts

-// @flow
-
 import { getLogger } from '../base/logging/functions';
 
 export default getLogger('features/dropbox');

react/features/filmstrip/actions.any.js → react/features/filmstrip/actions.any.ts

-// @flow
-
 import {
     SET_FILMSTRIP_ENABLED,
     SET_FILMSTRIP_VISIBLE,

react/features/filmstrip/actions.native.js → react/features/filmstrip/actions.native.ts

-// @flow
-
+// @ts-ignore
 import conferenceStyles from '../conference/components/native/styles';
 
 import { SET_TILE_VIEW_DIMENSIONS } from './actionTypes';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
 import { styles } from './components';
 import { SQUARE_TILE_ASPECT_RATIO, TILE_MARGIN } from './constants';
-import { getColumnCount } from './functions';
-import { getTileViewParticipantCount } from './functions.native';
+import { getColumnCount, getTileViewParticipantCount } from './functions.native';
 
 export * from './actions.any';
 

react/features/filmstrip/actions.web.js → react/features/filmstrip/actions.web.ts

-// @flow
-import type { Dispatch } from 'redux';
-
+import { IStore } from '../app/types';
+import { pinParticipant } from '../base/participants/actions';
 import {
     getLocalParticipant,
     getParticipantById,
-    getRemoteParticipantCount,
-    pinParticipant
-} from '../base/participants';
-import { shouldHideSelfView } from '../base/settings/functions.any';
-import { getMaxColumnCount } from '../video-layout';
+    getRemoteParticipantCount
+} from '../base/participants/functions';
+import { shouldHideSelfView } from '../base/settings/functions.web';
+import { getMaxColumnCount } from '../video-layout/functions.web';
 
 import {
     ADD_STAGE_PARTICIPANT,
     getNumberOfPartipantsForTileView,
     getVerticalViewMaxWidth,
     isFilmstripResizable,
-    isStageFilmstripTopPanel,
-    showGridInVerticalView
-} from './functions';
-import { isStageFilmstripAvailable } from './functions.web';
+    isStageFilmstripAvailable,
+    isStageFilmstripTopPanel
+    , showGridInVerticalView } from './functions.web';
 
 export * from './actions.any';
 
  *  width: number,
  * }}
  */
-export function resizeFilmStrip(width) {
+export function resizeFilmStrip(width: number) {
     return {
         type: RESIZE_FILMSTRIP,
         width
  * @returns {Function}
  */
 export function setTileViewDimensions() {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
         const {
                 numberOfParticipants,
                 desiredNumberOfVisibleTiles: numberOfVisibleTiles
             });
-        const thumbnailsTotalHeight = rows * (TILE_VERTICAL_MARGIN + height);
+        const thumbnailsTotalHeight = (rows ?? 1) * (TILE_VERTICAL_MARGIN + (height ?? 0));
         const availableHeight = clientHeight - TILE_VIEW_GRID_VERTICAL_MARGIN;
         const hasScroll = availableHeight < thumbnailsTotalHeight;
         const filmstripWidth
-            = Math.min(clientWidth - TILE_VIEW_GRID_HORIZONTAL_MARGIN, columns * (TILE_HORIZONTAL_MARGIN + width))
+            = Math.min(clientWidth - TILE_VIEW_GRID_HORIZONTAL_MARGIN,
+                (columns ?? 1) * (TILE_HORIZONTAL_MARGIN + (width ?? 0)))
                 + (hasScroll ? SCROLL_SIZE : 0);
         const filmstripHeight = Math.min(availableHeight, thumbnailsTotalHeight);
 
  * @returns {Function}
  */
 export function setVerticalViewDimensions() {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { clientHeight = 0, clientWidth = 0 } = state['features/base/responsive-ui'];
         const { width: filmstripWidth } = state['features/filmstrip'];
         const { localScreenShare } = state['features/base/participants'];
 
         let gridView = {};
-        let thumbnails = {};
+        let thumbnails: any = {};
         let filmstripDimensions = {};
         let hasScroll = false;
         let remoteVideosContainerWidth;
                 columns,
                 rows
             } = calculateResponsiveTileViewDimensions({
-                clientWidth: filmstripWidth.current,
+                clientWidth: filmstripWidth.current ?? 0,
                 clientHeight,
                 disableTileEnlargement: false,
                 maxColumns,
                 numberOfParticipants,
                 desiredNumberOfVisibleTiles: numberOfVisibleTiles
             });
-            const thumbnailsTotalHeight = rows * (TILE_VERTICAL_MARGIN + height);
+            const thumbnailsTotalHeight = (rows ?? 1) * (TILE_VERTICAL_MARGIN + (height ?? 0));
 
             hasScroll = clientHeight < thumbnailsTotalHeight;
-            const widthOfFilmstrip = (columns * (TILE_HORIZONTAL_MARGIN + width)) + (hasScroll ? SCROLL_SIZE : 0);
+            const widthOfFilmstrip = ((columns ?? 1) * (TILE_HORIZONTAL_MARGIN + (width ?? 0)))
+                + (hasScroll ? SCROLL_SIZE : 0);
             const filmstripHeight = Math.min(clientHeight - TILE_VIEW_GRID_VERTICAL_MARGIN, thumbnailsTotalHeight);
 
             gridView = {
                 width: widthOfFilmstrip
             };
         } else {
-            thumbnails = calculateThumbnailSizeForVerticalView(clientWidth, filmstripWidth.current, resizableFilmstrip);
+            thumbnails = calculateThumbnailSizeForVerticalView(clientWidth, filmstripWidth.current ?? 0,
+                resizableFilmstrip);
 
             remoteVideosContainerWidth
                 = thumbnails?.local?.width + TILE_VERTICAL_CONTAINER_HORIZONTAL_MARGIN + SCROLL_SIZE;
  * @returns {Function}
  */
 export function setHorizontalViewDimensions() {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { clientHeight = 0, clientWidth = 0 } = state['features/base/responsive-ui'];
         const disableSelfView = shouldHideSelfView(state);
  * @returns {Function}
  */
 export function setStageFilmstripViewDimensions() {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
         const {
             maxColumns,
             noHorizontalContainerMargin: verticalWidth > 0,
             numberOfParticipants,
-            numberOfVisibleTiles,
+            desiredNumberOfVisibleTiles: numberOfVisibleTiles,
             minTileHeight: topPanel ? TILE_MIN_HEIGHT_SMALL : null
         });
-        const thumbnailsTotalHeight = rows * (TILE_VERTICAL_MARGIN + height);
+        const thumbnailsTotalHeight = (rows ?? 1) * (TILE_VERTICAL_MARGIN + (height ?? 0));
         const hasScroll = clientHeight < thumbnailsTotalHeight;
         const filmstripWidth
-            = Math.min(clientWidth - TILE_VIEW_GRID_HORIZONTAL_MARGIN, columns * (TILE_HORIZONTAL_MARGIN + width))
+            = Math.min(clientWidth - TILE_VIEW_GRID_HORIZONTAL_MARGIN,
+                (columns ?? 1) * (TILE_HORIZONTAL_MARGIN + (width ?? 0)))
             + (hasScroll ? SCROLL_SIZE : 0);
         const filmstripHeight = Math.min(clientHeight - TILE_VIEW_GRID_VERTICAL_MARGIN, thumbnailsTotalHeight);
 
  * @returns {Function}
  */
 export function clickOnVideo(n: number) {
-    return (dispatch: Function, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
-        const { id: localId } = getLocalParticipant(state);
+        const { id: localId } = getLocalParticipant(state) ?? {};
 
         // Use the list that correctly represents the current order of the participants as visible in the UI.
         const { remoteParticipants } = state['features/filmstrip'];
         if (participants.length - 1 < n) {
             return;
         }
-        const { id, pinned } = getParticipantById(state, participants[n]);
+        const { id, pinned } = getParticipantById(state, participants[n] ?? '') ?? {};
 
         if (isStageFilmstripAvailable(state)) {
-            dispatch(togglePinStageParticipant(id));
+            dispatch(togglePinStageParticipant(id ?? ''));
         } else {
             dispatch(pinParticipant(pinned ? null : id));
         }
  * @param {boolean?} pinned - Whether the participant is pinned or not.
  * @returns {Object}
  */
-export function addStageParticipant(participantId, pinned = false) {
+export function addStageParticipant(participantId: string, pinned = false) {
     return {
         type: ADD_STAGE_PARTICIPANT,
         participantId,
  * @param {string} participantId - The Id of the participant to be removed.
  * @returns {Object}
  */
-export function removeStageParticipant(participantId) {
+export function removeStageParticipant(participantId: string) {
     return {
         type: REMOVE_STAGE_PARTICIPANT,
         participantId
  * @param {Array<Object>} queue - The new list.
  * @returns {Object}
  */
-export function setStageParticipants(queue) {
+export function setStageParticipants(queue: Object[]) {
     return {
         type: SET_STAGE_PARTICIPANTS,
         queue
  * @param {string} participantId - The id of the participant to be toggled.
  * @returns {Object}
  */
-export function togglePinStageParticipant(participantId) {
+export function togglePinStageParticipant(participantId: string) {
     return {
         type: TOGGLE_PIN_STAGE_PARTICIPANT,
         participantId
  * @returns {Object}
  */
 export function setScreensharingTileDimensions() {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
         const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
         const { visible, topPanelHeight, topPanelVisible } = state['features/filmstrip'];
  * @param {boolean} visible - Whether it should be visible or not.
  * @returns {Object}
  */
-export function setTopPanelVisible(visible) {
+export function setTopPanelVisible(visible: boolean) {
     return {
         type: SET_TOP_PANEL_VISIBILITY,
         visible
  * @param {string|undefined} participantId - The id of the participant to be set.
  * @returns {Object}
  */
-export function setScreenshareFilmstripParticipant(participantId) {
+export function setScreenshareFilmstripParticipant(participantId?: string) {
     return {
         type: SET_SCREENSHARE_FILMSTRIP_PARTICIPANT,
         participantId

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

 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.any';
+import { shouldHideSelfView } from '../../../base/settings/functions.web';
 // @ts-ignore
 import { showToolbox } from '../../../toolbox/actions.web';
 import { isButtonEnabled, isToolboxVisible } from '../../../toolbox/functions.web';

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

 }: IProps) => {
     const stageFilmstrip = useSelector(isStageFilmstripAvailable);
     const pinned = useSelector((state: IReduxState) => getParticipantById(state, participantId))?.pinned;
-    const activePinnedParticipants: Array<{ participantId: string; pinned: boolean; }>
+    const activePinnedParticipants: Array<{ participantId: string; pinned?: boolean; }>
         = useSelector(getPinnedActiveParticipants);
     const isPinned = activePinnedParticipants.find(p => p.participantId === participantId);
     const { classes: styles } = useStyles();

react/features/filmstrip/functions.any.js → react/features/filmstrip/functions.any.ts

-import { getActiveSpeakersToBeDisplayed, getVirtualScreenshareParticipantOwnerId } from '../base/participants';
+import { IStore } from '../app/types';
+import {
+    getActiveSpeakersToBeDisplayed,
+    getVirtualScreenshareParticipantOwnerId
+} from '../base/participants/functions';
 
 import { setRemoteParticipants } from './actions';
 import { isFilmstripScrollVisible } from './functions';
  * @returns {void}
  * @private
  */
-export function updateRemoteParticipants(store: Object, participantId: ?number) {
+export function updateRemoteParticipants(store: IStore, participantId?: string) {
     const state = store.getState();
     let reorderedParticipants = [];
     const { sortedRemoteVirtualScreenshareParticipants } = state['features/base/participants'];
     }
 
     // Always update the order of the thumnails.
-    const participantsWithScreenShare = screenShareParticipants.reduce((acc, screenshare) => {
+    const participantsWithScreenShare = screenShareParticipants.reduce<string[]>((acc, screenshare) => {
         const ownerId = getVirtualScreenshareParticipantOwnerId(screenshare);
 
         acc.push(ownerId);
  * @returns {void}
  * @private
  */
-export function updateRemoteParticipantsOnLeave(store: Object, participantId: ?string = null) {
+export function updateRemoteParticipantsOnLeave(store: IStore, participantId: string | null = null) {
     if (!participantId) {
         return;
     }

react/features/filmstrip/functions.native.js → react/features/filmstrip/functions.native.ts

-// @flow
-
-import { FILMSTRIP_ENABLED, getFeatureFlag } from '../base/flags';
+import { IReduxState } from '../app/types';
+import { IStateful } from '../base/app/types';
+import { FILMSTRIP_ENABLED } from '../base/flags/constants';
+import { getFeatureFlag } from '../base/flags/functions';
 import {
     getLocalParticipant,
     getParticipantCountWithFake,
     getPinnedParticipant
-} from '../base/participants';
-import { Platform } from '../base/react';
-import { toState } from '../base/redux';
+} from '../base/participants/functions';
+import Platform from '../base/react/Platform.native';
+import { toState } from '../base/redux/functions';
 import { ASPECT_RATIO_NARROW } from '../base/responsive-ui/constants';
-import { shouldHideSelfView } from '../base/settings/functions.any';
+import { shouldHideSelfView } from '../base/settings/functions.native';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
 import conferenceStyles from '../conference/components/native/styles';
-import { shouldDisplayTileView } from '../video-layout';
+import { shouldDisplayTileView } from '../video-layout/functions.native';
 
+// @ts-ignore
 import { styles } from './components';
 
 export * from './functions.any';
  * resolved to a Redux state object with the toState function.
  * @returns {boolean}
  */
-export function isFilmstripVisible(stateful: Object | Function) {
+export function isFilmstripVisible(stateful: IStateful) {
     const state = toState(stateful);
 
     const enabled = getFeatureFlag(state, FILMSTRIP_ENABLED, true);
  * @returns {boolean} - If remote video thumbnails should be displayed/visible
  * in the filmstrip, then {@code true}; otherwise, {@code false}.
  */
-export function shouldRemoteVideosBeVisible(state: Object) {
+export function shouldRemoteVideosBeVisible(state: IReduxState) {
     if (state['features/invite'].calleeInfoVisible) {
         return false;
     }
 /**
  * Not implemented on mobile.
  *
+ * @param {any} _state - Used on web.
  * @returns {Array<string>}
  */
-export function getActiveParticipantsIds() {
+export function getActiveParticipantsIds(_state: any) {
     return [];
 }
 
  * resolved to a Redux state object with the toState function.
  * @returns {number} - The number of participants displayed in tile view.
  */
-export function getTileViewParticipantCount(stateful: Object | Function) {
+export function getTileViewParticipantCount(stateful: IStateful) {
     const state = toState(stateful);
     const disableSelfView = shouldHideSelfView(state);
     const localParticipant = getLocalParticipant(state);
  * @returns {number} - The number of columns to be rendered in tile view.
  * @private
  */
-export function getColumnCount(stateful: Object | Function) {
+export function getColumnCount(stateful: IStateful) {
     const state = toState(stateful);
     const participantCount = getTileViewParticipantCount(state);
     const { aspectRatio } = state['features/base/responsive-ui'];
  * @param {Object} state - The redux state.
  * @returns {boolean} - True if the scroll is displayed and false otherwise.
  */
-export function isFilmstripScrollVisible(state) {
+export function isFilmstripScrollVisible(state: IReduxState) {
     if (shouldDisplayTileView(state)) {
         return state['features/filmstrip']?.tileViewDimensions?.hasScroll;
     }
 /**
  * Whether the stage filmstrip is available or not.
  *
- * @param {Object} state - Redux state.
+ * @param {any} _state - Used on web.
+ * @param {any} _count - Used on web.
  * @returns {boolean}
  */
-export function isStageFilmstripAvailable() {
+export function isStageFilmstripAvailable(_state: any, _count?: any) {
     return false;
 }
 
 /**
  * Whether the stage filmstrip is enabled.
  *
+ * @param {any} _state - Used on web.
  * @returns {boolean}
  */
-export function isStageFilmstripEnabled() {
+export function isStageFilmstripEnabled(_state: any) {
     return false;
 }
 
 /**
  * Whether or not the top panel is enabled.
  *
+ * @param {any} _state - Used on web.
  * @returns {boolean}
  */
-export function isTopPanelEnabled() {
+export function isTopPanelEnabled(_state: any) {
     return false;
 
 }
     clientHeight,
     insets = {},
     localParticipantVisible = true
+}: {
+    aspectRatio: Symbol;
+    clientHeight: number;
+    clientWidth: number;
+    insets: {
+        bottom?: number;
+        left?: number;
+        right?: number;
+        top?: number;
+    };
+    localParticipantVisible?: boolean;
 }) {
     const { height, width, margin } = styles.thumbnail;
     const conferenceBorder = conferenceStyles.conference.borderWidth || 0;
 /**
  * Not implemented on mobile.
  *
+ * @param {any} _state - Used on web.
  * @returns {undefined}
  */
-export function getScreenshareFilmstripParticipantId() {
+export function getScreenshareFilmstripParticipantId(_state: any) {
     return undefined;
 }
 

react/features/filmstrip/functions.web.js → react/features/filmstrip/functions.web.ts

-// @flow
-
+import { IReduxState } from '../app/types';
+import { IStateful } from '../base/app/types';
 import { isMobileBrowser } from '../base/environment/utils';
-import { MEDIA_TYPE } from '../base/media';
+import { MEDIA_TYPE } from '../base/media/constants';
 import {
     getLocalParticipant,
     getParticipantById,
     getParticipantCountWithFake,
     getPinnedParticipant,
     isScreenShareParticipant
-} from '../base/participants';
-import { toState } from '../base/redux';
-import { shouldHideSelfView } from '../base/settings/functions.any';
+} from '../base/participants/functions';
+import { toState } from '../base/redux/functions';
+import { shouldHideSelfView } from '../base/settings/functions.web';
 import {
     getVideoTrackByParticipant,
     isLocalTrackMuted,
 } from '../base/tracks/functions';
 import { isTrackStreamingStatusActive } from '../connection-indicator/functions';
 import { isSharingStatus } from '../shared-video/functions';
-import {
-    LAYOUTS,
-    getCurrentLayout,
-    getNotResponsiveTileViewGridDimensions
-} from '../video-layout';
+import { LAYOUTS } from '../video-layout/constants';
+import { getCurrentLayout, getNotResponsiveTileViewGridDimensions } from '../video-layout/functions.web';
 
 import {
     ASPECT_RATIO_BREAKPOINT,
 
 export * from './functions.any';
 
-declare var interfaceConfig: Object;
-
 /**
  * Returns true if the filmstrip on mobile is visible, false otherwise.
  *
  * function lies here only for the sake of consistency and to avoid flow errors
  * on import.
  *
- * @param {Object | Function} stateful - The Object or Function that can be
+ * @param {IStateful} stateful - The Object or Function that can be
  * resolved to a Redux state object with the toState function.
  * @returns {boolean}
  */
-export function isFilmstripVisible(stateful: Object | Function) {
+export function isFilmstripVisible(stateful: IStateful) {
     return toState(stateful)['features/filmstrip'].visible;
 }
 
  * Determines whether the remote video thumbnails should be displayed/visible in
  * the filmstrip.
  *
- * @param {Object} state - The full redux state.
+ * @param {IReduxState} state - The full redux state.
  * @returns {boolean} - If remote video thumbnails should be displayed/visible
  * in the filmstrip, then {@code true}; otherwise, {@code false}.
  */
-export function shouldRemoteVideosBeVisible(state: Object) {
+export function shouldRemoteVideosBeVisible(state: IReduxState) {
     if (state['features/invite'].calleeInfoVisible) {
         return false;
     }
 /**
  * Checks whether there is a playable video stream available for the user associated with the passed ID.
  *
- * @param {Object | Function} stateful - The Object or Function that can be
+ * @param {IStateful} stateful - The Object or Function that can be
  * resolved to a Redux state object with the toState function.
  * @param {string} id - The id of the participant.
  * @returns {boolean} <tt>true</tt> if there is a playable video stream available
  * or <tt>false</tt> otherwise.
  */
-export function isVideoPlayable(stateful: Object | Function, id: String) {
+export function isVideoPlayable(stateful: IStateful, id: string) {
     const state = toState(stateful);
     const tracks = state['features/base/tracks'];
     const participant = id ? getParticipantById(state, id) : getLocalParticipant(state);
  * @param {number} clientHeight - The height of the app window.
  * @returns {{local: {height, width}, remote: {height, width}}}
  */
-export function calculateThumbnailSizeForHorizontalView(clientHeight: number = 0) {
+export function calculateThumbnailSizeForHorizontalView(clientHeight = 0) {
     const topBottomMargin = 15;
     const availableHeight = Math.min(clientHeight,
         (interfaceConfig.FILM_STRIP_MAX_HEIGHT || DEFAULT_FILMSTRIP_WIDTH) + topBottomMargin);
  * @param {boolean} isResizable - Whether the filmstrip is resizable or not.
  * @returns {{local: {height, width}, remote: {height, width}}}
  */
-export function calculateThumbnailSizeForVerticalView(clientWidth: number = 0,
-        filmstripWidth: number = 0, isResizable = false) {
+export function calculateThumbnailSizeForVerticalView(clientWidth = 0, filmstripWidth = 0, isResizable = false) {
     const availableWidth = Math.min(
         Math.max(clientWidth - VERTICAL_VIEW_HORIZONTAL_MARGIN, 0),
         (isResizable ? filmstripWidth : interfaceConfig.FILM_STRIP_MAX_HEIGHT) || DEFAULT_FILMSTRIP_WIDTH);
  * @param {number} clientWidth - The width of the window.
  * @returns {number} The minimum height of a thumbnail.
  */
-export function getThumbnailMinHeight(clientWidth) {
+export function getThumbnailMinHeight(clientWidth: number) {
     return clientWidth < ASPECT_RATIO_BREAKPOINT ? TILE_MIN_HEIGHT_SMALL : TILE_MIN_HEIGHT_LARGE;
 }
 
  * @param {number} clientWidth - The width of the window.
  * @returns {number} The default aspect ratio for a tile.
  */
-export function getTileDefaultAspectRatio(disableResponsiveTiles, disableTileEnlargement, clientWidth) {
+export function getTileDefaultAspectRatio(disableResponsiveTiles: boolean,
+        disableTileEnlargement: boolean, clientWidth: number) {
     if (!disableResponsiveTiles && disableTileEnlargement && clientWidth < ASPECT_RATIO_BREAKPOINT) {
         return SQUARE_TILE_ASPECT_RATIO;
     }
  * @param {Object} state - The redux store state.
  * @returns {number} The number of participants that will be displayed in tile view.
  */
-export function getNumberOfPartipantsForTileView(state) {
+export function getNumberOfPartipantsForTileView(state: IReduxState) {
     const { iAmRecorder } = state['features/base/config'];
     const disableSelfView = shouldHideSelfView(state);
     const { localScreenShare } = state['features/base/participants'];
  * @param {Object} state - The redux store state.
  * @returns {Object} - The dimensions.
  */
-export function calculateNonResponsiveTileViewDimensions(state) {
+export function calculateNonResponsiveTileViewDimensions(state: IReduxState) {
     const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
     const { disableTileEnlargement } = state['features/base/config'];
     const { columns: c, minVisibleRows, rows: r } = getNotResponsiveTileViewGridDimensions(state);
     numberOfParticipants,
     desiredNumberOfVisibleTiles = TILE_VIEW_DEFAULT_NUMBER_OF_VISIBLE_TILES,
     minTileHeight
+}: {
+    clientHeight: number;
+    clientWidth: number;
+    desiredNumberOfVisibleTiles: number;
+    disableTileEnlargement?: boolean;
+    maxColumns: number;
+    minTileHeight?: number | null;
+    noHorizontalContainerMargin?: boolean;
+    numberOfParticipants: number;
 }) {
     let height, width;
     let columns, rows;
-    let dimensions = {
+
+    interface IDimensions {
+        columns?: number;
+        height?: number;
+        maxArea: number;
+        numberOfVisibleParticipants?: number;
+        rows?: number;
+        width?: number;
+    }
+
+    let dimensions: IDimensions = {
         maxArea: 0
     };
-    let minHeightEnforcedDimensions = {
+    let minHeightEnforcedDimensions: IDimensions = {
         maxArea: 0
     };
-    let zeroVisibleRowsDimensions = {
+    let zeroVisibleRowsDimensions: IDimensions = {
         maxArea: 0
     };
 
     disableTileEnlargement = false,
     noHorizontalContainerMargin = false,
     minTileHeight
-}: Object) {
+}: {
+    clientHeight: number;
+    clientWidth: number;
+    columns: number;
+    disableResponsiveTiles: boolean;
+    disableTileEnlargement?: boolean;
+    minTileHeight?: number | null;
+    minVisibleRows: number;
+    noHorizontalContainerMargin?: boolean;
+}) {
     const aspectRatio = getTileDefaultAspectRatio(disableResponsiveTiles, disableTileEnlargement, clientWidth);
     const minHeight = minTileHeight || getThumbnailMinHeight(clientWidth);
     const viewWidth = clientWidth - (columns * TILE_HORIZONTAL_MARGIN)
  * the thumbnail.
  * @returns {number} - One of <tt>DISPLAY_VIDEO</tt> or <tt>DISPLAY_AVATAR</tt>.
 */
-export function computeDisplayModeFromInput(input: Object) {
+export function computeDisplayModeFromInput(input: any) {
     const {
         filmstripType,
         isActiveParticipant,
  * @param {Object} state - The Thumbnail component's state.
  * @returns {Object}
 */
-export function getDisplayModeInput(props: Object, state: Object) {
+export function getDisplayModeInput(props: any, state: { canPlayEventReceived: boolean; }) {
     const {
         _currentLayout,
         _isActiveParticipant,
  * @param {Object} state - Redux state.
  * @returns {boolean}
  */
-export function isFilmstripResizable(state: Object) {
+export function isFilmstripResizable(state: IReduxState) {
     const { filmstrip } = state['features/base/config'];
     const _currentLayout = getCurrentLayout(state);
 
  * @param {Object} state - Redux state.
  * @returns {boolean}
  */
-export function showGridInVerticalView(state) {
+export function showGridInVerticalView(state: IReduxState) {
     const resizableFilmstrip = isFilmstripResizable(state);
     const { width } = state['features/filmstrip'];
 
  * @param {Object} state - Redux state.
  * @returns {number}
  */
-export function getVerticalViewMaxWidth(state) {
+export function getVerticalViewMaxWidth(state: IReduxState) {
     const { width } = state['features/filmstrip'];
     const _resizableFilmstrip = isFilmstripResizable(state);
     const _verticalViewGrid = showGridInVerticalView(state);
  * @param {Object} state - The redux state.
  * @returns {boolean} - True if the scroll is displayed and false otherwise.
  */
-export function isFilmstripScrollVisible(state) {
+export function isFilmstripScrollVisible(state: IReduxState) {
     const _currentLayout = getCurrentLayout(state);
     let hasScroll = false;
 
     switch (_currentLayout) {
     case LAYOUTS.TILE_VIEW:
-        ({ hasScroll = false } = state['features/filmstrip'].tileViewDimensions);
+        ({ hasScroll = false } = state['features/filmstrip'].tileViewDimensions ?? {});
         break;
     case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
     case LAYOUTS.STAGE_FILMSTRIP_VIEW: {
  * @param {Object} state - Redux state.
  * @returns {Array<string>}
  */
-export function getActiveParticipantsIds(state) {
+export function getActiveParticipantsIds(state: IReduxState) {
     const { activeParticipants } = state['features/filmstrip'];
 
     return activeParticipants.map(p => p.participantId);
  * @param {Object} state - Redux state.
  * @returns {Array<Object>}
  */
-export function getPinnedActiveParticipants(state) {
+export function getPinnedActiveParticipants(state: IReduxState) {
     const { activeParticipants } = state['features/filmstrip'];
 
     return activeParticipants.filter(p => p.pinned);
  * to be displayed.
  * @returns {boolean}
  */
-export function isStageFilmstripAvailable(state, minParticipantCount = 0) {
+export function isStageFilmstripAvailable(state: IReduxState, minParticipantCount = 0) {
     const { activeParticipants } = state['features/filmstrip'];
     const { remoteScreenShares } = state['features/video-layout'];
-    const sharedVideo = isSharingStatus(state['features/shared-video']?.status);
+    const sharedVideo = isSharingStatus(state['features/shared-video']?.status ?? '');
 
     return isStageFilmstripEnabled(state) && !sharedVideo
         && activeParticipants.length >= minParticipantCount
  * to be displayed.
  * @returns {boolean}
  */
-export function isStageFilmstripTopPanel(state, minParticipantCount = 0) {
+export function isStageFilmstripTopPanel(state: IReduxState, minParticipantCount = 0) {
     const { remoteScreenShares } = state['features/video-layout'];
 
     return isTopPanelEnabled(state)
  * @param {Object} state - Redux state.
  * @returns {boolean}
  */
-export function isStageFilmstripEnabled(state) {
+export function isStageFilmstripEnabled(state: IReduxState) {
     const { filmstrip } = state['features/base/config'];
 
     return !filmstrip?.disableStageFilmstrip && interfaceConfig.VERTICAL_FILMSTRIP;
  * @param {string} filmstripType - The current filmstrip type.
  * @returns {string}
  */
-export function getThumbnailTypeFromLayout(currentLayout, filmstripType) {
+export function getThumbnailTypeFromLayout(currentLayout: string, filmstripType: string) {
     switch (currentLayout) {
     case LAYOUTS.TILE_VIEW:
         return THUMBNAIL_TYPE.TILE;
  * @param {Object} state - Redux state.
  * @returns {string} - The participant id.
  */
-export function getScreenshareFilmstripParticipantId(state) {
+export function getScreenshareFilmstripParticipantId(state: IReduxState) {
     const { screenshareFilmstripParticipantId } = state['features/filmstrip'];
     const screenshares = state['features/video-layout'].remoteScreenShares;
     let id = screenshares.find(sId => sId === screenshareFilmstripParticipantId);
  * @param {Object} state - Redux state.
  * @returns {boolean}
  */
-export function isTopPanelEnabled(state) {
+export function isTopPanelEnabled(state: IReduxState) {
     const { filmstrip } = state['features/base/config'];
     const participantsCount = getParticipantCount(state);
 

react/features/filmstrip/logger.js → react/features/filmstrip/logger.ts

-// @flow
-
 import { getLogger } from '../base/logging/functions';
 
 export default getLogger('features/filmstrip');

react/features/filmstrip/middleware.native.js → react/features/filmstrip/middleware.native.ts

-// @flow
+import { PARTICIPANT_JOINED, PARTICIPANT_LEFT } from '../base/participants/actionTypes';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import { CLIENT_RESIZED, SAFE_AREA_INSETS_CHANGED, SET_ASPECT_RATIO } from '../base/responsive-ui/actionTypes';
 
-import { PARTICIPANT_JOINED, PARTICIPANT_LEFT } from '../base/participants';
-import { MiddlewareRegistry } from '../base/redux';
-import { CLIENT_RESIZED, SAFE_AREA_INSETS_CHANGED, SET_ASPECT_RATIO } from '../base/responsive-ui';
-
-import { setTileViewDimensions } from './actions';
-import { updateRemoteParticipants, updateRemoteParticipantsOnLeave } from './functions';
-import './subscriber';
+import { setTileViewDimensions } from './actions.native';
+import { updateRemoteParticipants, updateRemoteParticipantsOnLeave } from './functions.native';
+import './subscriber.native';
 
 /**
  * The middleware of the feature Filmstrip.

react/features/filmstrip/middleware.web.js → react/features/filmstrip/middleware.web.ts

-// @flow
-
 import { batch } from 'react-redux';
 
+// @ts-expect-error
 import VideoLayout from '../../../modules/UI/videolayout/VideoLayout';
 import {
     DOMINANT_SPEAKER_CHANGED,
     PARTICIPANT_JOINED,
-    PARTICIPANT_LEFT,
+    PARTICIPANT_LEFT
+} from '../base/participants/actionTypes';
+import {
     getDominantSpeakerParticipant,
     getLocalParticipant,
     getLocalScreenShareParticipant,
     isScreenShareParticipant
-} from '../base/participants';
-import { MiddlewareRegistry } from '../base/redux';
-import { CLIENT_RESIZED } from '../base/responsive-ui';
-import { SETTINGS_UPDATED } from '../base/settings';
-import {
-    LAYOUTS,
-    getCurrentLayout,
-    setTileView
-} from '../video-layout';
+} from '../base/participants/functions';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import { CLIENT_RESIZED } from '../base/responsive-ui/actionTypes';
+import { SETTINGS_UPDATED } from '../base/settings/actionTypes';
+import { setTileView } from '../video-layout/actions.web';
+import { LAYOUTS } from '../video-layout/constants';
+import { getCurrentLayout } from '../video-layout/functions.web';
 
 import {
     ADD_STAGE_PARTICIPANT,
     updateRemoteParticipants,
     updateRemoteParticipantsOnLeave
 } from './functions.web';
-import './subscriber';
+import './subscriber.web';
 
 /**
  * Map of timers.
             const { clientWidth, clientHeight } = action;
             let height, width;
 
-            if (filmstripWidth.current > clientWidth - MIN_STAGE_VIEW_WIDTH) {
+            if ((filmstripWidth.current ?? 0) > clientWidth - MIN_STAGE_VIEW_WIDTH) {
                 width = Math.max(clientWidth - MIN_STAGE_VIEW_WIDTH, DEFAULT_FILMSTRIP_WIDTH);
             } else {
-                width = Math.min(clientWidth - MIN_STAGE_VIEW_WIDTH, filmstripWidth.userSet);
+                width = Math.min(clientWidth - MIN_STAGE_VIEW_WIDTH, filmstripWidth.userSet ?? 0);
             }
             if (width !== filmstripWidth.current) {
                 store.dispatch(setFilmstripWidth(width));
             }
 
-            if (topPanelHeight.current > clientHeight - MIN_STAGE_VIEW_HEIGHT) {
+            if ((topPanelHeight.current ?? 0) > clientHeight - MIN_STAGE_VIEW_HEIGHT) {
                 height = Math.max(clientHeight - MIN_STAGE_VIEW_HEIGHT, TOP_FILMSTRIP_HEIGHT);
             } else {
-                height = Math.min(clientHeight - MIN_STAGE_VIEW_HEIGHT, topPanelHeight.userSet);
+                height = Math.min(clientHeight - MIN_STAGE_VIEW_HEIGHT, topPanelHeight.userSet ?? 0);
             }
             if (height !== topPanelHeight.current) {
                 store.dispatch(setFilmstripHeight(height));
             const localScreenShare = getLocalScreenShareParticipant(state);
             const activeParticipantsIds = getActiveParticipantsIds(state);
 
-            if (activeParticipantsIds.find(id => id === local.id)) {
-                store.dispatch(removeStageParticipant(local.id));
+            if (activeParticipantsIds.find(id => id === local?.id)) {
+                store.dispatch(removeStageParticipant(local?.id ?? ''));
             }
 
             if (localScreenShare) {
 
             clearTimeout(tid);
             timers.delete(participantId);
-        } else if (activeParticipants.length < maxStageParticipants) {
+        } else if (activeParticipants.length < (maxStageParticipants ?? 0)) {
             queue = [ ...activeParticipants, {
                 participantId,
                 pinned
         const currentLayout = getCurrentLayout(state);
         const dominantSpeaker = getDominantSpeakerParticipant(state);
 
-        if (dominantSpeaker?.id === id || id === local.id || currentLayout === LAYOUTS.TILE_VIEW) {
+        if (dominantSpeaker?.id === id || id === local?.id || currentLayout === LAYOUTS.TILE_VIEW) {
             break;
         }
 

react/features/filmstrip/subscriber.any.js → react/features/filmstrip/subscriber.any.ts

-// @flow
-
-import { StateListenerRegistry } from '../base/redux';
+import StateListenerRegistry from '../base/redux/StateListenerRegistry';
 
 import { isFilmstripScrollVisible, updateRemoteParticipants } from './functions';
 

react/features/filmstrip/subscriber.native.js → react/features/filmstrip/subscriber.native.ts

-// @flow
-
 import { getCurrentConference } from '../base/conference/functions';
-import { StateListenerRegistry } from '../base/redux';
-import { shouldDisplayTileView } from '../video-layout';
+import StateListenerRegistry from '../base/redux/StateListenerRegistry';
+import { shouldDisplayTileView } from '../video-layout/functions.native';
 
-import { setRemoteParticipants, setTileViewDimensions } from './actions';
+import { setRemoteParticipants, setTileViewDimensions } from './actions.native';
 import { getTileViewParticipantCount } from './functions.native';
 import './subscriber.any';
 

react/features/filmstrip/subscriber.web.js → react/features/filmstrip/subscriber.web.ts

-// @flow
-
 import { isMobileBrowser } from '../base/environment/utils';
-import { getParticipantCountWithFake, pinParticipant } from '../base/participants';
-import { StateListenerRegistry } from '../base/redux';
-import { clientResized } from '../base/responsive-ui';
-import { shouldHideSelfView } from '../base/settings';
-import { setFilmstripVisible } from '../filmstrip/actions';
+import { pinParticipant } from '../base/participants/actions';
+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';
-import { LAYOUTS, getCurrentLayout, shouldDisplayTileView } from '../video-layout';
+import { LAYOUTS } from '../video-layout/constants';
+import { getCurrentLayout, shouldDisplayTileView } from '../video-layout/functions.web';
 
-import {
-    clearStageParticipants,
+import { clearStageParticipants,
+    setFilmstripVisible,
     setHorizontalViewDimensions,
     setScreenshareFilmstripParticipant,
     setScreensharingTileDimensions,

react/features/follow-me/subscriber.ts

 import StateListenerRegistry from '../base/redux/StateListenerRegistry';
 // eslint-disable-next-line lines-around-comment
 // @ts-ignore
-import { getPinnedActiveParticipants, isStageFilmstripEnabled } from '../filmstrip/functions.web';
+import { getPinnedActiveParticipants, isStageFilmstripEnabled } from '../filmstrip/functions';
 import { shouldDisplayTileView } from '../video-layout/functions';
 
 import { FOLLOW_ME_COMMAND } from './constants';

react/features/notifications/types.ts

     description?: string | React.ReactNode;
     descriptionArguments?: Object;
     descriptionKey?: string;
+    hideErrorSupportLink?: boolean;
     icon?: string;
     maxLines?: number;
     sticky?: boolean;

react/features/overlay/functions.js → react/features/overlay/functions.ts

-// @flow
+import { IReduxState } from '../app/types';
 
 import { getOverlays } from './overlays';
 
 /**
  * Returns the overlay to be currently rendered.
  *
- * @param {Object} state - The Redux state.
+ * @param {IReduxState} state - The Redux state.
  * @returns {?React$ComponentType<*>}
  */
-export function getOverlayToRender(state: Object) {
+export function getOverlayToRender(state: IReduxState) {
     for (const overlay of getOverlays()) {
         // react-i18n / react-redux wrap components and thus we cannot access
         // the wrapped component's static methods directly.
+        // @ts-ignore
         const component = overlay.WrappedComponent || overlay;
 
         if (component.needsRender(state)) {
 /**
  * Returns the visibility of the media permissions prompt.
  *
- * @param {Object} state - The Redux state.
+ * @param {IReduxState} state - The Redux state.
  * @returns {boolean}
  */
-export function getMediaPermissionPromptVisibility(state: Object) {
+export function getMediaPermissionPromptVisibility(state: IReduxState) {
     return state['features/overlay'].isMediaPermissionPromptVisible;
 }

react/features/overlay/logger.js → react/features/overlay/logger.ts

-// @flow
-
 import { getLogger } from '../base/logging/functions';
 
 export default getLogger('features/overlay');

react/features/overlay/middleware.js → react/features/overlay/middleware.ts

-// @flow
-
+import { IStore } from '../app/types';
 import { JitsiConferenceErrors } from '../base/lib-jitsi-meet';
 import {
     isFatalJitsiConferenceError,
     isFatalJitsiConnectionError
 } from '../base/lib-jitsi-meet/functions';
-import { StateListenerRegistry } from '../base/redux';
+import StateListenerRegistry from '../base/redux/StateListenerRegistry';
 
 import { setFatalError } from './actions';
 
-declare var APP: Object;
-
 /**
  * Error type. Basically like Error, but augmented with a recoverable property.
  */
-type ErrorType = {|
+type ErrorType = {
 
     /**
      * Error message.
      */
-    message?: string,
+    message?: string;
 
     /**
      * Error name.
      */
-    name: string,
+    name: string;
 
     /**
      * Indicates whether this event is recoverable or not.
      */
-    recoverable?: boolean
-|};
+    recoverable?: boolean;
+};
 
 /**
  * List of errors that are not fatal (or handled differently) so then the overlays won't kick in.
  * @param {Object|string} error - The error to process.
  * @returns {void}
  */
-const getErrorExtraInfo = (getState, error) => {
+const getErrorExtraInfo = (getState: IStore['getState'], error: ErrorType) => {
     const state = getState();
     const { error: conferenceError } = state['features/base/conference'];
     const { error: configError } = state['features/base/config'];
 
     if (error === conferenceError) {
         return {
-            type: ERROR_TYPES.CONFERENCE,
+            type: ERROR_TYPES.CONFERENCE, // @ts-ignore
             isFatal: isFatalJitsiConferenceError(error.name || error)
         };
     }
 
     if (error === connectionError) {
         return {
-            type: ERROR_TYPES.CONNECTION,
+            type: ERROR_TYPES.CONNECTION, // @ts-ignore
             isFatal: isFatalJitsiConnectionError(error.name || error)
         };
     }

react/features/overlay/overlays.native.js

-// @flow
-
-import {
-    PageReloadOverlay
-} from './components/native';
-
-/**
- * Returns the list of available platform specific overlays.
- *
- * @returns {Array<React$Element>}
- */
-export function getOverlays(): Array<React$Element<*>> {
-    return [
-        PageReloadOverlay
-    ];
-}

react/features/overlay/overlays.native.ts

+import { ReactElement } from 'react';
+
+// @ts-ignore
+import { PageReloadOverlay } from './components/native';
+
+/**
+ * Returns the list of available platform specific overlays.
+ *
+ * @returns {Array<ReactElement>}
+ */
+export function getOverlays(): Array<ReactElement> {
+    return [
+        PageReloadOverlay
+    ];
+}

react/features/overlay/overlays.web.js → react/features/overlay/overlays.web.ts

-// @flow
-
 import {
     PageReloadOverlay,
     SuspendedOverlay,
     UserMediaPermissionsOverlay
+
+    // @ts-ignore
 } from './components/web';
 
 /**

react/features/prejoin/functions.ts

 import { IReduxState } from '../app/types';
 import { getRoomName } from '../base/conference/functions';
-import { getDialOutStatusUrl, getDialOutUrl } from '../base/config/functions.web';
+import { getDialOutStatusUrl, getDialOutUrl } from '../base/config/functions';
 import { isAudioMuted, isVideoMutedByUser } from '../base/media/functions';
 
 /**

react/features/reactions/actions.any.ts

     FLUSH_REACTION_BUFFER,
     PUSH_REACTIONS,
     SEND_REACTIONS,
-    SET_REACTION_QUEUE
+    SET_REACTION_QUEUE,
+    SHOW_SOUNDS_NOTIFICATION
 } from './actionTypes';
 import { IReactionEmojiProps } from './constants';
 import { IReactionsAction } from './reducer';
         reactions
     };
 }
+
+/**
+ * Displays the disable sounds notification.
+ *
+ * @returns {void}
+ */
+export function displayReactionSoundsNotification(): IReactionsAction {
+    return {
+        type: SHOW_SOUNDS_NOTIFICATION
+    };
+}

react/features/reactions/actions.native.ts

+export * from './actions.any';

react/features/reactions/actions.web.ts

 import {
-    SHOW_SOUNDS_NOTIFICATION,
     TOGGLE_REACTIONS_VISIBLE
 } from './actionTypes';
 import { IReactionsAction } from './reducer';
 
+export * from './actions.any';
+
 /**
  * Toggles the visibility of the reactions menu.
  *
         type: TOGGLE_REACTIONS_VISIBLE
     };
 }
-
-/**
- * Displays the disable sounds notification.
- *
- * @returns {void}
- */
-export function displayReactionSoundsNotification(): IReactionsAction {
-    return {
-        type: SHOW_SOUNDS_NOTIFICATION
-    };
-}

react/features/reactions/middleware.ts

 } from './actionTypes';
 import {
     addReactionsToChat,
+    displayReactionSoundsNotification,
     flushReactionBuffer,
     pushReactions,
     sendReactions,
     setReactionQueue
-} from './actions.any';
-import { displayReactionSoundsNotification } from './actions.web';
+} from './actions';
 import {
     ENDPOINT_REACTION_NAME,
     IMuteCommandAttributes,

react/features/screen-share/actions.web.ts

 import { IStore } from '../app/types';
 import { openDialog } from '../base/dialog/actions';
 import { browser } from '../base/lib-jitsi-meet';
-import { shouldHideShareAudioHelper } from '../base/settings/functions';
-import { toggleScreensharing } from '../base/tracks/actions';
+import { shouldHideShareAudioHelper } from '../base/settings/functions.web';
+import { toggleScreensharing } from '../base/tracks/actions.web';
 
 import {
     SET_SCREENSHARE_TRACKS,

react/features/screen-share/components/web/ShareAudioDialog.tsx

 import { translate } from '../../../base/i18n/functions';
 import { connect } from '../../../base/redux/functions';
 import { updateSettings } from '../../../base/settings/actions';
-import { shouldHideShareAudioHelper } from '../../../base/settings/functions.any';
-import { toggleScreensharing } from '../../../base/tracks/actions';
+import { shouldHideShareAudioHelper } from '../../../base/settings/functions.web';
+import { toggleScreensharing } from '../../../base/tracks/actions.web';
 import Checkbox from '../../../base/ui/components/web/Checkbox';
 import Dialog from '../../../base/ui/components/web/Dialog';
 

react/features/settings/middleware.web.ts

 import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 import { SETTINGS_UPDATED } from '../base/settings/actionTypes';
-import { getHideSelfView } from '../base/settings/functions';
+import { getHideSelfView } from '../base/settings/functions.web';
 import { showNotification } from '../notifications/actions';
 import { DISABLE_SELF_VIEW_NOTIFICATION_ID, NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
 

react/features/toolbox/actions.any.ts

  *     enabled: boolean
  * }}
  */
-export function setToolboxEnabled(enabled: boolean): Object {
+export function setToolboxEnabled(enabled: boolean) {
     return {
         type: SET_TOOLBOX_ENABLED,
         enabled

react/features/video-layout/functions.web.ts

  * @returns {number}
  */
 export function getMaxColumnCount(state: IReduxState, options: {
-    disableResponsiveTiles?: boolean; disableTileEnlargement?: boolean; width?: number; } = {}) {
+    disableResponsiveTiles?: boolean; disableTileEnlargement?: boolean; width?: number | null; } = {}) {
     if (typeof interfaceConfig === 'undefined') {
         return DEFAULT_MAX_COLUMNS;
     }

react/features/video-layout/subscriber.ts

 import { equals } from '../base/redux/functions';
 import { isFollowMeActive } from '../follow-me/functions';
 
-import { virtualScreenshareParticipantsUpdated } from './actions.web';
-import { getAutoPinSetting, updateAutoPinnedParticipant } from './functions.web';
+import { virtualScreenshareParticipantsUpdated } from './actions';
+import { getAutoPinSetting, updateAutoPinnedParticipant } from './functions';
 
 StateListenerRegistry.register(
     /* selector */ state => state['features/base/participants'].sortedRemoteVirtualScreenshareParticipants,

react/features/video-quality/subscriber.ts

 } from '../filmstrip/functions';
 import { LAYOUTS } from '../video-layout/constants';
 import {
+    getCurrentLayout,
     getVideoQualityForLargeVideo,
     getVideoQualityForResizableFilmstripThumbnails,
+    getVideoQualityForScreenSharingFilmstrip,
     getVideoQualityForStageThumbnails,
     shouldDisplayTileView
 } from '../video-layout/functions';
-import { getCurrentLayout, getVideoQualityForScreenSharingFilmstrip } from '../video-layout/functions.any';
 
 import {
     setMaxReceiverVideoQualityForLargeVideo,