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

react/features/authentication/actions.web.ts

@@ -5,9 +5,8 @@ import { hideDialog, openDialog } from '../base/dialog/actions';
 import {
     CANCEL_LOGIN
 } from './actionTypes';
-// eslint-disable-next-line lines-around-comment
+import LoginDialog from './components/web/LoginDialog';
-// @ts-ignore
+import WaitForOwnerDialog from './components/web/WaitForOwnerDialog';
-import { LoginDialog, WaitForOwnerDialog } from './components';
 
 export * from './actions.any';
 

react/features/av-moderation/middleware.ts

@@ -18,8 +18,6 @@ import StateListenerRegistry from '../base/redux/StateListenerRegistry';
 import { playSound, registerSound, unregisterSound } from '../base/sounds/actions';
 import { hideNotification, showNotification } from '../notifications/actions';
 import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
 import { muteLocal } from '../video-menu/actions.any';
 
 import {
@@ -60,8 +58,6 @@ import {
 } from './functions';
 import { ASKED_TO_UNMUTE_FILE } from './sounds';
 
-declare const APP: any;
-
 MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
     const { type } = action;
     const { conference } = getConferenceState(getState());

react/features/base/conference/reducer.ts

@@ -48,6 +48,7 @@ export interface IJitsiConference {
     enableAVModeration: Function;
     end: Function;
     getBreakoutRooms: Function;
+    getLocalParticipantProperty: Function;
     getLocalTracks: Function;
     grantOwner: Function;
     isAVModerationSupported: Function;

react/features/base/dialog/actions.ts

@@ -22,7 +22,7 @@ import { isDialogOpen } from './functions';
  *     component: (React.Component | undefined)
  * }}
  */
-export function hideDialog(component?: ComponentType) {
+export function hideDialog(component?: ComponentType<any>) {
     return {
         type: HIDE_DIALOG,
         component
@@ -54,7 +54,7 @@ export function hideSheet() {
  *     componentProps: (Object | undefined)
  * }}
  */
-export function openDialog(component: ComponentType, componentProps?: Object) {
+export function openDialog(component: ComponentType<any>, componentProps?: Object) {
     return {
         type: OPEN_DIALOG,
         component,
@@ -92,7 +92,7 @@ export function openSheet(component: ComponentType, componentProps?: Object) {
  * specified {@code component}.
  * @returns {Function}
  */
-export function toggleDialog(component: ComponentType, componentProps?: Object) {
+export function toggleDialog(component: ComponentType<any>, componentProps?: Object) {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         if (isDialogOpen(getState, component)) {
             dispatch(hideDialog(component));

react/features/speaker-stats/actions.native.js

@@ -1,3 +0,0 @@
-// @flow
-
-export * from './actions.any';

react/features/speaker-stats/actions.ts

@@ -1,5 +1,3 @@
-// @flow
-
 import {
     INIT_REORDER_STATS,
     INIT_SEARCH,
@@ -55,7 +53,7 @@ export function updateStats(stats: Object) {
  * @param {Object} participantIds - Participant ids.
  * @returns {Object}
  */
-export function updateSortedSpeakerStatsIds(participantIds: Array<string>) {
+export function updateSortedSpeakerStatsIds(participantIds?: Array<string>) {
     return {
         type: UPDATE_SORTED_SPEAKER_STATS_IDS,
         participantIds

react/features/speaker-stats/actions.web.js

@@ -1,3 +0,0 @@
-// @flow
-
-export * from './actions.any';

react/features/speaker-stats/components/AbstractSpeakerStatsList.js

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { getLocalParticipant } from '../../base/participants';
-import { initUpdateStats } from '../actions.any';
+import { initUpdateStats } from '../actions';
 import {
     SPEAKER_STATS_RELOAD_INTERVAL
 } from '../constants';

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

@@ -6,8 +6,6 @@ import { makeStyles } from 'tss-react/mui';
 import { IReduxState } from '../../../app/types';
 import Dialog from '../../../base/ui/components/web/Dialog';
 import { escapeRegexp } from '../../../base/util/helpers';
-// eslint-disable-next-line lines-around-comment
-// @ts-ignore
 import { initSearch, resetSearchCriteria, toggleFaceExpressions } from '../../actions';
 import {
     DISPLAY_SWITCH_BREAKPOINT,
@@ -107,7 +105,9 @@ const SpeakerStats = () => {
     useEffect(() => {
         showFaceExpressions && !displaySwitch && dispatch(toggleFaceExpressions());
     }, [ clientWidth ]);
-    useEffect(() => () => dispatch(resetSearchCriteria()), []);
+    useEffect(() => () => {
+        dispatch(resetSearchCriteria());
+    }, []);
 
     return (
         <Dialog

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

@@ -1,4 +1,3 @@
-/* eslint-disable lines-around-comment */
 import { Theme } from '@mui/material';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,7 +9,6 @@ import { IconSearch } from '../../../base/icons/svg';
 import { getFieldValue } from '../../../base/react/functions';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import { MOBILE_BREAKPOINT } from '../../constants';
-// @ts-ignore
 import { isSpeakerStatsSearchDisabled } from '../../functions';
 
 const useStyles = makeStyles()((theme: Theme) => {

react/features/speaker-stats/functions.ts

@@ -1,40 +1,37 @@
-// @flow
-
 import _ from 'lodash';
 
-import {
+import { IReduxState } from '../app/types';
-    PARTICIPANT_ROLE,
+import { PARTICIPANT_ROLE } from '../base/participants/constants';
-    getParticipantById
+import { getParticipantById } from '../base/participants/functions';
-} from '../base/participants';
 
 /**
  * Checks if the speaker stats search is disabled.
  *
- * @param {*} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {boolean} - True if the speaker stats search is disabled and false otherwise.
  */
-export function isSpeakerStatsSearchDisabled(state: Object) {
+export function isSpeakerStatsSearchDisabled(state: IReduxState) {
-    return state['features/base/config']?.speakerStats.disableSearch;
+    return state['features/base/config']?.speakerStats?.disableSearch;
 }
 
 /**
  * Checks if the speaker stats is disabled.
  *
- * @param {*} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {boolean} - True if the speaker stats search is disabled and false otherwise.
  */
-export function isSpeakerStatsDisabled(state: Object) {
+export function isSpeakerStatsDisabled(state: IReduxState) {
     return state['features/base/config']?.speakerStats?.disabled;
 }
 
 /**
  * Gets whether participants in speaker stats should be ordered or not, and with what priority.
  *
- * @param {*} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {Array<string>} - The speaker stats order array or an empty array.
  */
-export function getSpeakerStatsOrder(state: Object) {
+export function getSpeakerStatsOrder(state: IReduxState) {
-    return state['features/base/config']?.speakerStats.order ?? [
+    return state['features/base/config']?.speakerStats?.order ?? [
         'role',
         'name',
         'hasLeft'
@@ -44,42 +41,42 @@ export function getSpeakerStatsOrder(state: Object) {
 /**
  * Gets speaker stats.
  *
- * @param {*} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {Object} - The speaker stats.
  */
-export function getSpeakerStats(state: Object) {
+export function getSpeakerStats(state: IReduxState) {
     return state['features/speaker-stats']?.stats ?? {};
 }
 
 /**
  * Gets speaker stats search criteria.
  *
- * @param {*} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {string | null} - The search criteria.
  */
-export function getSearchCriteria(state: Object) {
+export function getSearchCriteria(state: IReduxState) {
     return state['features/speaker-stats']?.criteria;
 }
 
 /**
  * Gets if speaker stats reorder is pending.
  *
- * @param {*} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @returns {boolean} - The pending reorder flag.
  */
-export function getPendingReorder(state: Object) {
+export function getPendingReorder(state: IReduxState) {
     return state['features/speaker-stats']?.pendingReorder ?? false;
 }
 
 /**
  * Get sorted speaker stats ids based on a configuration setting.
  *
- * @param {Object} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @param {Object} stats - The current speaker stats.
  * @returns {Object} - Ordered speaker stats ids.
  * @public
  */
-export function getSortedSpeakerStatsIds(state: Object, stats: Object) {
+export function getSortedSpeakerStatsIds(state: IReduxState, stats: Object) {
     const orderConfig = getSpeakerStatsOrder(state);
 
     if (orderConfig) {
@@ -98,7 +95,7 @@ export function getSortedSpeakerStatsIds(state: Object, stats: Object) {
      * @param {Object} nextParticipant - The second participant for comparison.
      * @returns {number} - The sort order of the two participants.
      */
-    function compareFn(currentParticipant, nextParticipant) {
+    function compareFn(currentParticipant: any, nextParticipant: any) {
         if (orderConfig.includes('hasLeft')) {
             if (nextParticipant.hasLeft() && !currentParticipant.hasLeft()) {
                 return -1;
@@ -139,13 +136,13 @@ export function getSortedSpeakerStatsIds(state: Object, stats: Object) {
 /**
  * Enhance speaker stats to include data needed for ordering.
  *
- * @param {Object} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @param {Object} stats - Speaker stats.
  * @param {Array<string>} orderConfig - Ordering configuration.
  * @returns {Object} - Enhanced speaker stats.
  * @public
  */
-function getEnhancedStatsForOrdering(state, stats, orderConfig) {
+function getEnhancedStatsForOrdering(state: IReduxState, stats: any, orderConfig?: string[]) {
     if (!orderConfig) {
         return stats;
     }
@@ -166,14 +163,14 @@ function getEnhancedStatsForOrdering(state, stats, orderConfig) {
 /**
  * Filter stats by search criteria.
  *
- * @param {Object} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @param {Object | undefined} stats - The unfiltered stats.
  *
  * @returns {Object} - Filtered speaker stats.
  * @public
  */
-export function filterBySearchCriteria(state: Object, stats: ?Object) {
+export function filterBySearchCriteria(state: IReduxState, stats?: Object) {
-    const filteredStats = _.cloneDeep(stats ?? getSpeakerStats(state));
+    const filteredStats: any = _.cloneDeep(stats ?? getSpeakerStats(state));
     const criteria = getSearchCriteria(state);
 
     if (criteria !== null) {
@@ -194,14 +191,14 @@ export function filterBySearchCriteria(state: Object, stats: ?Object) {
 /**
  * Reset the hidden speaker stats.
  *
- * @param {Object} state - The redux state.
+ * @param {IReduxState} state - The redux state.
  * @param {Object | undefined} stats - The unfiltered stats.
  *
  * @returns {Object} - Speaker stats.
  * @public
  */
-export function resetHiddenStats(state: Object, stats: ?Object) {
+export function resetHiddenStats(state: IReduxState, stats?: Object) {
-    const resetStats = _.cloneDeep(stats ?? getSpeakerStats(state));
+    const resetStats: any = _.cloneDeep(stats ?? getSpeakerStats(state));
 
     for (const id in resetStats) {
         if (resetStats[id].hidden) {

react/features/speaker-stats/middleware.ts

@@ -1,12 +1,10 @@
-// @flow
-
 import {
     PARTICIPANT_JOINED,
     PARTICIPANT_KICKED,
     PARTICIPANT_LEFT,
     PARTICIPANT_UPDATED
 } from '../base/participants/actionTypes';
-import { MiddlewareRegistry } from '../base/redux';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 
 import {
     INIT_SEARCH,

react/features/subtitles/actions.any.ts

@@ -95,12 +95,12 @@ export function setRequestingSubtitles(enabled: boolean) {
 /**
  * Signals that the local user has selected language for the translation.
  *
- * @param {boolean} value - The selected language for translation.
+ * @param {string} value - The selected language for translation.
  * @returns {{
  *      type: UPDATE_TRANSLATION_LANGUAGE
  * }}
  */
-export function updateTranslationLanguage(value: boolean) {
+export function updateTranslationLanguage(value: string) {
     return {
         type: UPDATE_TRANSLATION_LANGUAGE,
         value

react/features/subtitles/actions.web.ts

@@ -1,3 +1,4 @@
+import { IStore } from '../app/types';
 import { toggleDialog } from '../base/dialog/actions';
 
 import LanguageSelectorDialogWeb from './components/LanguageSelectorDialog.web';
@@ -12,7 +13,7 @@ export * from './actions.any';
  * }}
  */
 export function toggleLanguageSelectorDialog() {
-    return function(dispatch: (Object) => Object) {
+    return function(dispatch: IStore['dispatch']) {
         dispatch(toggleDialog(LanguageSelectorDialogWeb));
     };
 }

react/features/subtitles/logger.ts

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

react/features/subtitles/middleware.ts

@@ -1,7 +1,8 @@
-// @flow
 import i18next from 'i18next';
+import { AnyAction } from 'redux';
 
-import { MiddlewareRegistry } from '../base/redux';
+import { IStore } from '../app/types';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
 
 import {
     ENDPOINT_MESSAGE_RECEIVED,
@@ -81,7 +82,7 @@ MiddlewareRegistry.register(store => next => action => {
  * @private
  * @returns {Object} The value returned by {@code next(action)}.
  */
-function _endpointMessageReceived({ dispatch, getState }, next, action) {
+function _endpointMessageReceived({ dispatch, getState }: IStore, next: Function, action: AnyAction) {
     const { json } = action;
 
     if (!(json
@@ -93,7 +94,7 @@ function _endpointMessageReceived({ dispatch, getState }, next, action) {
     const state = getState();
     const translationLanguage
         = state['features/base/conference'].conference
-            .getLocalParticipantProperty(P_NAME_TRANSLATION_LANGUAGE);
+            ?.getLocalParticipantProperty(P_NAME_TRANSLATION_LANGUAGE);
 
     try {
         const transcriptMessageID = json.message_id;
@@ -125,7 +126,7 @@ function _endpointMessageReceived({ dispatch, getState }, next, action) {
             // We update the previous transcript message with the same
             // message ID or adds a new transcript message if it does not
             // exist in the map.
-            const newTranscriptMessage = {
+            const newTranscriptMessage: any = {
                 ...state['features/subtitles']._transcriptMessages
                         .get(transcriptMessageID)
                     || { participantName }
@@ -173,19 +174,19 @@ function _endpointMessageReceived({ dispatch, getState }, next, action) {
  * @private
  * @returns {void}
  */
-function _requestingSubtitlesChange({ getState }) {
+function _requestingSubtitlesChange({ getState }: IStore) {
     const state = getState();
     const { _language } = state['features/subtitles'];
     const { conference } = state['features/base/conference'];
 
     const requestingSubtitles = _language !== 'transcribing.subtitlesOff';
 
-    conference.setLocalParticipantProperty(
+    conference?.setLocalParticipantProperty(
         P_NAME_REQUESTING_TRANSCRIPTION,
         requestingSubtitles);
 
     if (requestingSubtitles) {
-        conference.setLocalParticipantProperty(
+        conference?.setLocalParticipantProperty(
             P_NAME_TRANSLATION_LANGUAGE,
             _language.replace('translation-languages:', ''));
     }
@@ -200,11 +201,11 @@ function _requestingSubtitlesChange({ getState }) {
  * @private
  * @returns {void}
  */
-function _requestingSubtitlesSet({ getState }, enabled: boolean) {
+function _requestingSubtitlesSet({ getState }: IStore, enabled: boolean) {
     const state = getState();
     const { conference } = state['features/base/conference'];
 
-    conference.setLocalParticipantProperty(
+    conference?.setLocalParticipantProperty(
         P_NAME_REQUESTING_TRANSCRIPTION,
         enabled);
 }
@@ -219,15 +220,15 @@ function _requestingSubtitlesSet({ getState }, enabled: boolean) {
  * @returns {void}
  */
 function _setClearerOnTranscriptMessage(
-        dispatch,
+        dispatch: IStore['dispatch'],
-        transcriptMessageID,
+        transcriptMessageID: string,
-        transcriptMessage) {
+        transcriptMessage: { clearTimeOut?: number; }) {
     if (transcriptMessage.clearTimeOut) {
         clearTimeout(transcriptMessage.clearTimeOut);
     }
 
     transcriptMessage.clearTimeOut
-        = setTimeout(
+        = window.setTimeout(
             () => dispatch(removeTranscriptMessage(transcriptMessageID)),
             REMOVE_AFTER_MS);
 }

react/features/transcribing/actions.ts

@@ -1,11 +1,6 @@
-// @flow
+import { IStore } from '../app/types';
-
+import { hideNotification, showErrorNotification, showNotification } from '../notifications/actions';
-import {
+import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
-    NOTIFICATION_TIMEOUT_TYPE,
-    hideNotification,
-    showErrorNotification,
-    showNotification
-} from '../notifications';
 
 import {
     SET_PENDING_TRANSCRIBING_NOTIFICATION_UID,
@@ -69,7 +64,7 @@ export function potentialTranscriberJoined(participantId: string) {
  * @returns {Function}
  */
 export function showPendingTranscribingNotification() {
-    return async (dispatch: Function) => {
+    return async (dispatch: IStore['dispatch']) => {
         const notification = await dispatch(showNotification({
             descriptionKey: 'transcribing.pending',
             titleKey: 'dialog.transcribing'
@@ -92,7 +87,7 @@ export function showPendingTranscribingNotification() {
  *     uid: number
  * }}
  */
-export function setPendingTranscribingNotificationUid(uid: ?number) {
+export function setPendingTranscribingNotificationUid(uid?: string) {
     return {
         type: SET_PENDING_TRANSCRIBING_NOTIFICATION_UID,
         uid
@@ -106,7 +101,7 @@ export function setPendingTranscribingNotificationUid(uid: ?number) {
  * @returns {Function}
  */
 export function hidePendingTranscribingNotification() {
-    return (dispatch: Function, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const { pendingNotificationUid } = getState()['features/transcribing'];
 
         if (pendingNotificationUid) {

react/features/transcribing/middleware.ts

@@ -1,13 +1,11 @@
-// @flow
-
-import { MiddlewareRegistry } from '../base/redux';
-import { toggleRequestingSubtitles } from '../subtitles';
-
 import {
     HIDDEN_PARTICIPANT_JOINED,
     HIDDEN_PARTICIPANT_LEFT,
     PARTICIPANT_UPDATED
-} from './../base/participants';
+} from '../base/participants/actionTypes';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import { toggleRequestingSubtitles } from '../subtitles/actions.any';
+
 import {
     _TRANSCRIBER_JOINED,
     _TRANSCRIBER_LEFT

react/features/transcribing/reducer.ts

@@ -62,7 +62,7 @@ export interface ITranscribingState {
     isDialing: boolean;
     isTerminating: boolean;
     isTranscribing: boolean;
-    pendingNotificationUid?: number;
+    pendingNotificationUid?: string;
     potentialTranscriberJIDs: string[];
     transcriberJID?: string | null;
 }

react/features/video-menu/actions.any.ts

@@ -1,32 +1,24 @@
-// @flow
+// @ts-ignore
 import { getLogger } from '@jitsi/logger';
-import type { Dispatch } from 'redux';
 
+// @ts-expect-error
 import UIEvents from '../../../service/UI/UIEvents';
 import {
     AUDIO_MUTE,
     VIDEO_MUTE,
     createRemoteMuteConfirmedEvent,
-    createToolbarEvent,
+    createToolbarEvent
-    sendAnalytics
+} from '../analytics/AnalyticsEvents';
-} from '../analytics';
+import { sendAnalytics } from '../analytics/functions';
+import { IStore } from '../app/types';
 import { rejectParticipantAudio, rejectParticipantVideo, showModeratedNotification } from '../av-moderation/actions';
 import { shouldShowModeratedNotification } from '../av-moderation/functions';
-import {
+import { setAudioMuted, setVideoMuted } from '../base/media/actions';
-    MEDIA_TYPE,
+import { MEDIA_TYPE, MediaType, VIDEO_MUTISM_AUTHORITY } from '../base/media/constants';
-    VIDEO_MUTISM_AUTHORITY,
+import { muteRemoteParticipant } from '../base/participants/actions';
-    setAudioMuted,
+import { getLocalParticipant, getRemoteParticipants } from '../base/participants/functions';
-    setVideoMuted
+import { toggleScreensharing } from '../base/tracks/actions';
-} from '../base/media';
+import { isModerationNotificationDisplayed } from '../notifications/functions';
-import {
-    getLocalParticipant,
-    getRemoteParticipants,
-    muteRemoteParticipant
-} from '../base/participants';
-import { toggleScreensharing } from '../base/tracks';
-import { isModerationNotificationDisplayed } from '../notifications';
-
-declare var APP: Object;
 
 const logger = getLogger(__filename);
 
@@ -38,8 +30,8 @@ const logger = getLogger(__filename);
  * @param {boolean} stopScreenSharing - Whether or not to stop the screensharing.
  * @returns {Function}
  */
-export function muteLocal(enable: boolean, mediaType: MEDIA_TYPE, stopScreenSharing: boolean = false) {
+export function muteLocal(enable: boolean, mediaType: MediaType, stopScreenSharing = false) {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const isAudio = mediaType === MEDIA_TYPE.AUDIO;
 
         if (!isAudio && mediaType !== MEDIA_TYPE.VIDEO) {
@@ -78,8 +70,8 @@ export function muteLocal(enable: boolean, mediaType: MEDIA_TYPE, stopScreenShar
  * @param {MEDIA_TYPE} mediaType - The type of the media channel to mute.
  * @returns {Function}
  */
-export function muteRemote(participantId: string, mediaType: MEDIA_TYPE) {
+export function muteRemote(participantId: string, mediaType: MediaType) {
-    return (dispatch: Dispatch<any>) => {
+    return (dispatch: IStore['dispatch']) => {
         if (mediaType !== MEDIA_TYPE.AUDIO && mediaType !== MEDIA_TYPE.VIDEO) {
             logger.error(`Unsupported media type: ${mediaType}`);
 
@@ -97,10 +89,10 @@ export function muteRemote(participantId: string, mediaType: MEDIA_TYPE) {
  * @param {MEDIA_TYPE} mediaType - The media type to mute.
  * @returns {Function}
  */
-export function muteAllParticipants(exclude: Array<string>, mediaType: MEDIA_TYPE) {
+export function muteAllParticipants(exclude: Array<string>, mediaType: MediaType) {
-    return (dispatch: Dispatch<any>, getState: Function) => {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
-        const localId = getLocalParticipant(state).id;
+        const localId = getLocalParticipant(state)?.id ?? '';
 
         if (!exclude.includes(localId)) {
             dispatch(muteLocal(true, mediaType, mediaType !== MEDIA_TYPE.AUDIO));

react/features/video-menu/actions.web.ts

@@ -1,4 +1,3 @@
-// @flow
 import { SHOW_CONNECTION_INFO } from '../base/connection/actionTypes';
 
 export * from './actions.any';